Images/elements/columns are overlapping on mobile

[andre1980]

Hi there,

I have made a page with 3 rows and 3 columns which include images and a title.
The problem that arises is when I look in mobile/tablet view the images get overlapped. I tried to fix it with gap elements, which helped in the past, but this doesn’t seem to help this time.

How can I set the contents not to overlap, but keep the responsiveness?

Thank in advance!

[Prasant]

Hello @sitepower,

Thanks for asking.

In general the page is looking good. However, the text is overlapping on the image on mobile. You can use following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .fixed-width-img .x-image {
    margin-bottom: 39px;
}

.fixed-width-img .x-text {
    margin-top: 10px;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[andre1980]

The given CSS didn’t directly work for me, but indirectly I saw I forgot I had used a custom CSS class to fix the height of the images which is causing the problem for mobile. So I disabled the class for mobile sizes. My mistake

Thanks for your great support though!

[nabeel]

Glad you’ve sorted it out and thank you for letting us know.

Cheers!