Images arent displaying properly on mobile

[smallsaul]

Hey guys.
I’m having some issues when displaying images
They are fine when viewed on a desktop / laptop, but on mobile they are compressed and not displaying fully.

Can you suggest how to remedy this?

These are the images on the:

home page
accomodation page
functions page

[mldarshana]

Hi there,

Thanks for writing in! Instead of setting a background image through your Column’s inline style section, could you please try utilizing Image element on Cornerstone to display your images.

Let us know how it goes.
Thanks!

[smallsaul]

Hey, I think the reason it’s set as a background element is so it doesn’t adjust when the browser width changes. Is there a way to achieve both? so it still displays on mobile, but doesnt shift size on the browser width change on desktop?

[nabeel]

Hi again,

Yes you can achieve both, first give all of your columns a class mobile-fix that has inline background images, then add the following CSS code in the Theme Options > CSS:

@media (max-width: 767px) {
    .mobile-fix {
        padding-bottom: 50% !important;
    }
}

This will fix the images issue on mobile devices.

Cheers!