Image sizes on pages

Hi
when creating a website i have added images in the page in full width to use the separators on the page. im not entirely sure how it was designed to be used but i achieved this by using a row and setting the background to the image i wanted then using the text widget to fill the row (probably the wrong way to do it) this seems to work fine on computers but on thiner widths it changes the image proportion. is there a way to keep the image the same proportion and just scale it so that on mobiles you see the same as you do on desktop but just scaled. like the video on the homepage as it stays the same but is just scaled


Thanks

Hello, try to use the following CSS code as a workaround.

You can add CSS code in Customize → Additional CSS section.

.panel-row-style-for-22-0,
.panel-row-style-for-22-3,
.panel-row-style-for-22-5 {
    height: calc(100vw / 2.1);
    padding: 0 !important;
}

Kind Regards, Roman.

Hi

this hasn’t worked, as i can tell it hasn’t seemed to change anything.

Thanks

That code is for this page only:
http://dev.geberit-csp.co.uk/about-syphonic-roof-drainage/

Did you check that page after adding the code?

Kind Regards, Roman.

Hi

i was looking at the wrong page, but when i look at that page it works on the top image but not the others, also how do i do this on every image on all pages?

thanks

Hello,

It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork.

Kind Regards, Roman.