Not displaying correctly on mobile screens

Hi guys

the front page of my site - https://www.broughtonschoolofmotoring.com - is not displaying correctly on small screens.

Although it looks ok in the editor. See:

https://www.broughtonschoolofmotoring.com/wp-content/uploads/Screen-Shot-2019-05-19-at-10.23.44.png

But when I view it on a mobile device the photographs at the top of the page overlap. See:

https://www.broughtonschoolofmotoring.com/wp-content/uploads/Screen-Shot-2019-05-19-at-10.18.19.png

Can you assist?

Hi Steve,

Thanks for reaching out.

It’s due to this CSS,with that, it has static width

.x-feature-box-graphic-inner {
    width: 1em;
}

Though, I can’t confirm if it’s a custom one. If it is then please remove that CSS, else, please add this CSS to Theme Options > CSS to override it.

.x-feature-box-graphic-inner {
    width: auto;
}

Hope this helps.

That’s great!

Many thanks.

I’ve added the code to Theme Options. I assume I won’t lose it when I update X?

Hey Steve,

Yes, you won’t lose it when updating since it’s saved in the database.

Thanks.

Brilliant, thanks for your fast and effective assistance.

You’re welcome, Steve.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.