Staff replied SP Page Builder

Resize imageson mobile devices

Asked by Frank 5 years ago Last activity 5 years ago

Hello.

Is there a way to resize images for mobile devices? E.g.: You can look at the page https://www.kleiner-gmbh.de/index.php/de/ich-benoetige-stanzteile/unsere-referenzteile/produkt1. There is a big picture of a part we produce. If i look at it on my mobile phone, only a small piece is shown.

Can you help me?

Regards
Frank

6 replies

Ofi Khan Staff

5 years ago

Hello Frank

Please use this CSS to Template Options -> Custom Code -> Custom CSS

@media (max-width: 425px){
    .sppb-img-responsive.image-fit {
        width: 50%;
    }
}
@media (max-width: 320px){
    .sppb-img-responsive.image-fit {
        width: 40%;
    }
}

Best regards

Frank Asked this

5 years ago

Hello Ofi,

thanks for your help. Please look at my screenshot at https://prnt.sc/13dxck2 Did i make it correct? On my mobile device it does not work but perhaps this will be a cache problem.

Regards
Frank

Ofi Khan Staff

5 years ago

Please use this CSS to Template Options -> Custom Code -> Custom CSS

@media (max-width: 425px){
    .sppb-img-responsive.image-fit {
        width: 50% !important;
    }
}
@media (max-width: 320px){
    .sppb-img-responsive.image-fit {
        width: 40% !important;
    }
}

Frank Asked this

5 years ago

Hm. Do you mean at "Helix Ultimate" when i select an template (see https://prnt.sc/13dzpf8). Or is there another place where i must put in den Custom Code?

Perhaps i can make an account for you? I guess you are much quicker then me ;-)

Frank Asked this

5 years ago

Hey, now it works. It must be a cache problem. I hate cache :-(

Regards
Frank

Ofi Khan Staff

5 years ago

You are welcome. Always clean the cache after each change.