Don't load images an Smartphones but on tablets and PCs

Permalink 1 user found helpful
Hello forum,
Images generated by a blog entry:
Is it possible to show them on tablets and desktops but not on a smartphone?
With ordinary images it is possible.
Should we edit the css-files, or is there a shorter way to achieve this.
Regards
Toni

 
grafoman replied on at Permalink Best Answer Reply
Hi!

You can make images invisible for certain screen sizes using media queries in css.

Give the image a class: "responsive-image"

Add css:
// make the image invisible 
.responsive-image{
display:none;
}
// make the image visible for screen widths that are higher than 768px, this is the common norm for tablets 
@media screen and (min-width: 768px) {
    .responsive-image{
display:block;
}
}


Hope this helps,

Grafoman
ToniConcreti replied on at Permalink Reply
Hi Grafoman,
Thanks a lot.
That Easy!
Great support.
Best regards from Stuttgart
Toni