Blog posts in mobile view wrongly displayed

Hi. The blog posts on my blog are not displaying correctly in mobile view.

1- The headings (which are supposed to be centered) are on the left side.
2- I have some highlighted texts which do not appear highlighted in mobile view.
3- Photo galleries are displayed as bullet points.

The blog I need help with is: www.melwanders.com

Thank you

Hi,

I’ve checked the blog post on mobile screen, and the heading text is already left aligned. Did you already resolve it?

Also, can you explain what is highlighted texts is? I can’t see it in your site.

Here is to fix the gallery image on your pages:

ul.blocks-gallery-grid {
    margin: 0;
    padding: 0;
}

ul.blocks-gallery-grid li {
    list-style: none;
}

Put the code into Customize > additional CSS.

Regards,

Hi Awan,

Thank you! The code for the gallery worked!

For the other points, I will share a screenshot how it looks on desktop and how it looks on mobile.
The heading texts are supposed to be centered (not left aligned). They are centered on the desktop version but are not in mobile view.
Also, this is an example of the highlighted text which I have (in the screenshot). It doesn’t look highlighted in mobile view.

I see…

Try this please:

h2.has-text-align-center {
    text-align: center;
}

p.has-background.has-text-align-center.has-very-light-gray-background-color {
    padding: 15px;
    text-align: center;
    background-color: lightgray;
}

Hi Awan.

Thank you so much! It worked. :slight_smile:

1 Like