Échangez sur Shopify et l'e-commerce en général
Hello.
I wish to hide an image displayed on the header of my website on the mobile view so I can male more room for the logo. I already saw some solution that involves adding the code @media only screen and (min-width: 750px){ #example { display: none; } at the end of a theme.scss, but I can't find the right way to use it. I now know I can not mess with the css file or my entire website goes wrong.
I use the theme prestige and here is the following code I use for the custom added image I asked a shopify expert to add for me.
{%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}
<a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
{%- render 'icon' with 'account' -%}
</a>
{%- endif -%}
<a href="/pages/nous-contacter" style="top: 1px;" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}">
<img src="{{'phone.png' | asset_url }}" alt="Nous Contacter" title="Nous Contacter" width="22"/>
</a>
<a href="{{ routes.search_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" data-action="toggle-search" aria-label="{{ 'header.navigation.search' | t }}">
<span class="hidden-tablet-and-up">{%- render 'icon' with 'search' -%}</span>
<span class="hidden-phone">{%- render 'icon' with 'search-desktop' -%}</span>
</a>
<a href="{{ routes.cart_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
<span class="hidden-tablet-and-up">{%- render 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- render 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart_item_count > 0 %}is-visible{% endif %}"></span>
</a>
Does anyone know the answer?
Hi Tho1,
Indeed you're on the right path !
Replace the code you just sent here with :
{%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}
<a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
{%- render 'icon' with 'account' -%}
</a>
{%- endif -%}
<a href="/pages/nous-contacter" style="top: 1px;" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %} hidden-phone">
<img src="{{'phone.png' | asset_url }}" alt="Nous Contacter" title="Nous Contacter" width="22"/>
</a>
<a href="{{ routes.search_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" data-action="toggle-search" aria-label="{{ 'header.navigation.search' | t }}">
<span class="hidden-tablet-and-up">{%- render 'icon' with 'search' -%}</span>
<span class="hidden-phone">{%- render 'icon' with 'search-desktop' -%}</span>
</a>
<a href="{{ routes.cart_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless section.settings.show_icons or use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
<span class="hidden-tablet-and-up">{%- render 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- render 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart_item_count > 0 %}is-visible{% endif %}"></span>
</a>
Basically i've added 'hidden-phone' as a class to your image, which should do the trick if your theme is well built.
IF IT DOESN'T CHANGE ANYTHING :
Open your theme.scss file, go right to the end of the file and paste this :
@media only screen and (min-width: 750px){
.hidden-phone {
display: none;
}
}
This should do the trick 🙂
Hope it helps
Utilisateur | CLASSEMENT |
---|---|
5 | |
2 | |
2 | |
2 | |
2 |
La création d'une entreprise peut s'avérer difficile. Il y a beaucoup de choses à mettre e...
By Océanne Nov 29, 2023Le Black Friday Cyber Monday (BFCM), ou Vendredi Fou et Cyber Lundi, 2023 se profile à l'h...
By Océanne Oct 18, 2023Cet article de blog est un récapitulatif du webinaire Se préparer à BFCM : Comment lanc...
By Jacqui Oct 11, 2023