Hide an image on the mobile view

[Tho1]

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?

[RMoreno]

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