How can I scale down or remove images for mobile view?

Store Design
, ,
1

hi everyone,

I’m having some difficulties with the images I used on a certain page on my website. All the images are way to big on mobile view. I would like to scale them down or remove them completely. How can I do this?

https://064a48-4.myshopify.com/pages/zakelijk

Best regards,

Felix

2

Hi @Felix_Ghys

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyHenry_0-1702739444686.png
PageFlyHenry_0-1702739444686.png1365×651 47.6 KB

@media (max-width: 767px){ img.lazyautosizes.lazyloaded { max-width: 50% !important; } }

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hi @Felix_Ghys , add the below code to your theme’s CSS file.

@media screen and (max-width:767px) {
.feature-row__image img {
    max-width: 180px !important;
    margin: 0 auto;
}
}

Notice I used 180px here. You can increase or decrease it.

Also if you want to remove the images completely, you can use below code.

@media screen and (max-width:767px) {
.feature-row__image img {
    display: none !important;
}
}
4

hi, thank you for the help. The size of the images is much better now. But this edit affects all the images on the whole website!

Is there a possibility for it only to work on the specific page mentioned above?

Best regards,

Felix