[Resolved] Images in sections not centering

[John]

Hi guys!

Not sure if this is down to the latest GP update or the latest WP update but the images on my front page are no longer centered. (Yes, I have them set to center. Yes, I have left-aligned them, saved that change, re-set the centering and saved the change again. Doesn’t help.

Any suggestions.

My front page:
http://www.thesupercargo.com/
The Seagull and the Logo should be centered above and below the text

I’m using WP 4.9.7

Cheers,
John

[David]

Hi there,

its a JetPack lazy loader problem. They add an inline-block property to the images which causes this. Personally i never use JetPack for this and many many other issues and the bloat it adds. If you still want to use the lazy loader, there are some CSS workarounds, for example add this CSS:

.centered .generate-sections-inside-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

And then for any section you want to have all elements centered just add centered to Custom Classes field in the Sections > Settings > Panel.

[John]

Many thanks David!

That fixed the problem.

I’m planning a revision to the front page. I’ll review my use of Jetpack in the light of what you write at the same time.

[David]

You’re welcome John.

[Author]

Posts