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

[Felix_Ghys]

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

[PageFly-Henry]

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 </body> -> save.

<style>

@media (max-width: 767px){

img.lazyautosizes.lazyloaded {

    max-width: 50% !important;

}

}
</style>   

Hope that my solution works for you.

Best regards,

Henry | PageFly

[Felix_Ghys]

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

[KabirDev]

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