Hide an image on the mobile view

Français Discussions Discussions générales
1

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 -%}

{%- render ‘icon’ with ‘account’ -%}

{%- endif -%}

Nous Contacter


{%- render ‘icon’ with ‘search’ -%}
{%- render ‘icon’ with ‘search-desktop’ -%}

<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 %}>
{%- render ‘icon’ with ‘cart’ -%}
{%- render ‘icon’ with ‘cart-desktop’ -%}

Does anyone know the answer?

2

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 -%}

{%- render 'icon' with 'account' -%}

{%- endif -%}

{%- render 'icon' with 'search' -%}
{%- render 'icon' with 'search-desktop' -%}

{%- render 'icon' with 'cart' -%}
{%- render 'icon' with 'cart-desktop' -%}

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 :slightly_smiling_face:

Hope it helps