[Resolved] Having problems centering certain content on mobile

[Justin]

My homepage header and recent blogs are not centered on mobile devices and I couldn’t figure out how to center the read more lable on the archive cards?

[Fernando]

Hi Justin,

Let’s tackle the “Header” first. To clarify, are you referring to the Page Hero? It’s the one apparent from my end that’s not centered and exceeding the Mobile Viewport. The paddings and margins or the Container Blocks are messing with its alignment.

Can you try removing all paddings and margins on the Container Blocks holding it on mobile view. Example: https://share.getcloudapp.com/L1u9NgQw

[Justin]

I removed everything and it got a lot worse

[Ying]

Make sure you’ve clicked the mobile icon so the changes only apply to mobile.

But when I inspect your site, all the margins/paddings are still there.

Did you add them back?

[Justin]

I removed all paddings and margins on desktop view and mobile and kept them off

[Justin]

Never mind I saw I had it in another container as well

[Justin]

That fixed that issue

[Justin]

Just need figure out how to center the read more lable on the archive cards?

[Ying]

Try add this CSS:

.dynamic-content-template p.read-more-button-container {
    text-align: center;
}

[Justin]

That didn’t work

[Ying]

Did you clear the cache?

[Justin]

It only worked on one that I had a php code to add lable because I had a custom excerpt and it was removing it

[Ying]

I see, then change the CSS to:

p.read-more-container, p.read-more-button-container {
    text-align: center;
}

[Justin]

Nice that worked thank you

[Ying]

You are welcome 🙂

[Author]

Posts