JQuery Function? Get an image to disappear when viewed in mobile and to only appear when it is viewed in larger screen sizes

Question

I have placed an image in my theme HTML and it looks great in desktop view.

What I would like is to have the image hidden in the mobile view.

This is because the image is in the correct Div for larger screen sizes but incorrect for the smaller ones.

I believe the following may be the way forward, in this case;

JQuery function 

LAYOUT
Go to file: theme.liquid
ADD - {% include 'do-not-display-mobile' %}

SNIPPET
Create a snippet called: do-not-display-mobile
Add the following - 
{% comment %} 
Does no display in mobile-view conditions
{% endcomment %}

<a href="#" title="Do not display (Mobile)" class="do-not-display-mobile">

<style>
.do-not-display-mobile{
display: none;
}
</style>

<script>
window.onload = function() {
 jQuery(function($) {   })
 });
}
</script>

Go to File:product-layout.liquid
Add to relevant elements: {% include 'do-not-display-mobile' %}

Then repeat for desktop-view.

UPDATE: I thought I needed a JQuery function ie IF screen width is <400px display none

But I do not know how to write the script, I used the answer below- by me.

Answer 1

So one way of having different views and styles based on screen size is using CSS3 @media tag in you case the max-with and min-with will help you be able to have different looks based on screen size. Like changing background color or hiding a box or changing number of columns.

Here is a link : https://www.w3schools.com/cSS/css3_mediaqueries_ex.asp

body {
    background-color: lightblue;
}

@media screen and (min-width: 400px) {
    body {
        background-color: lightgreen;
    }
}

@media screen and (min-width: 800px) {
    body {
        background-color: lavender;
    }
}

So you should add css attributes to that element you want to appear or disappear in different screen sizes. And you need to have a selector to that element or div like how you select tags on css to give them styles

Answer 2

It sounds as though you are referring to the basics of Responsive Web Design: different markups for different screen resolutions or types.

My preferred method is a combination of HTML5 and CSS3.

HTML

<div>
   <img class="desktop" src="/dt_image.png">
   <img class="mobile" src="/mb_image.png">
</div>

CSS

img.desktop {
    display: block;
}
img.mobile {
    /* Hide mobile version */
    display: none;
}

/* Mobile breakpoint */
@media only screen and (min-device-width: 320 px) and (max-device-width: 480px) {
    img.desktop {
        /* Hide desktop version */
        display: none;
    }
    img.mobile {
        display: block;
    }
}

Of course this also gives you the freedom and possibilities to define widths, and other attributes per image within your div.

Answer 3

It sounds as though you are referring to the basics of Responsive Web Design: different markups for different screen resolutions or types.

My preferred method is a combination of HTML5 and CSS3.

HTML

<div>
   <img class="desktop" src="/dt_image.png">
   <img class="mobile" src="/mb_image.png">
</div>

CSS (inside HTML sheet)

<style>
img {
    margin-top: 60px;
}   

img.desktop {
    display: block;
}
img.mobile {
    /* Hide mobile version */
    display: none;
}

/* Mobile breakpoint */
@media only screen and (min-device-width: 320 px) and (max-device-width: 480px) {
    img.desktop {
        /* Hide desktop version */
        display: none;
    }
    img.mobile {
        display: block;
    }
}
</style>

Of course this also gives you the freedom and possibilities to define widths, and other attributes per image within your div.