[Resolved] alignment for images doesn’t reflect on front end

[Mario]

Hi,

If i insert an image block and align it center it does not reflect this on the front nd of the site.(it stays left aligned)

It does however reflect on the site when i view it in “customizer”mode.

Any idea what could cause this?

I found a way to fix it if i put a container first and put the image inside the container and then align both the image and the container to the center.

This is not how it should be done though i asume…

Thanks,
Mario

[Fernando]

Hi Mario,

Glad you were able to resolve the issue.

This would depend on your site’s structure, aligning an Image Block itself relies on margins to center it whereas placing an Image Block inside a Container and centering it through the Container would rely on text-align rule.

One factor that may cause the Image Block not centering is if there is a margin that overrides the margin set be aligning it Center.

In any case, placing Blocks inside a Container Block is a good solution and there is no issue if a Block is centered through this way. 🙂

Hope this clarifies! 🙂

[Mario]

Hi Fernando,

Putting the image block inside a container unfortunally only sloves part of the alignment issues i have.

It gives me the option to align the images (left,center and right) and it enables me to add padding to the top and bottom of the image (by adding padding to the container…)

What i’m still not able to do is add padding to the left or right of the container and see it reflected in the front end of the site.

For example: I insert an image block into a container. I left align the container so that text underneath it gets pulled to the right of it. Then i try to add padding to the right of the container to create more space between the container and the text.

The added padding is not reflected on the front end of the site…

Bottom and top padding on the container works as expected though

Thanks,

[David]

Hi there,

can you share a link to where we can see the problem image ?

[Mario]

The site is in staging. I’m coming from thrive builder/architect and i am using the – Convert to blocks _ option to convert al the content. Perhaps it’s something from the old theme that’s interfering with the aligh/spacing funtions in Generatepress?

I looked at the html code in each of the blocks but i wasn’t able to spot any traces of left over Thrive theme code in them, or anything else that could set margings/padding inside the html code of the image or surrounding text blocks

I guess it’s difficult to solve the issue without being able to look at the site but maybe there’s something that comes to mind that could be a possible cause?

If not i will try to get the site live with all the posts formatted with the images “badly) aligned and try to fix it afterwards..

The site has a few hundred posts though, I’d rather be able to format them how i want right away ofcourse..

Thanks,

[Leo]

We won’t be able to determine the issue without seeing the issue live and inspecting the code, unfortunately.

Did you mean to provide it in the last reply?

[Mario]

Hi Leo,

I added login details for both the staging environment and then the login details of the admin area after that…

You can pick any of the posts and try to align an image center. It will reflect in the editor but after saving/updating the post it wont align on the front end of the site.

Feel free to try it on any of the posts you like… updating i mean…

Thanks,
Mario

[Leo]

I’m checking the “The Top 5 Best Hair Clippers for Home use, Barbers Quality” post and all the images there are aligned left/right.

Can you try setting them to align center?

[Mario]

I aligned the first 2 images center in that post now – https://wordpress-698876-2476248.cloudwaysapps.com/the-top-5-best-hair-clippers-for-home-use-barbers-quality/

Thanks

[Leo]

Hmm that’s strange.

Are you using the latest WP version 5.9+?

Does this issue exist if you activate a Twenty series WP theme to test?

[Mario]

I updated to the latest wordpress version and switched to twenty 22 theme… The image got aligned center so it fixed the issue.

I switched back to Generatepress and the image gets aligned left again while its set to center in the editor

[Leo]

Very strange. I’m unable to replicate it on my install and we haven’t had any other reports on this.

Can you disable all plugins in the staging site for us to take a closer look?

Please disable all caching and optimization on the server level as well.

Thanks!

[Mario]

Hi Leo,

Disabling the plugins worked. I narrowed it down to a plugin called Asset CleanUp: Page Speed Booster

if i disable that plugin the image aligns as it should.

any ideas on what setting in this plugin could cause the error?

Thanks,

[Mario]

Apollogies for not disabling all the plugins earlier btw, but i deactivated nearly all plugins i had on the site except for the few ones i need and asumed this particular plugin couldnt cause an issue since i followed instructions from the guys over at Authority Hacker and they use this plugin in combination with Generatepress in their courses. It must be something in the settings of that plugin…

[Mario]

Hi,
I maged to find the issue.I used this plugin with Thrive themes as well and set it to unload the Gutenberg css file. I enabled it again and now aligning works…

The only thing that i’m not able to do now is add padding to the right of the images..

I put the image in a container, left align both the image and the container and then i add padding to the right of the container to make the paragraph block to the right of it move further away to create more space between the image and the text… That doesnt seem to work.

Should itwork that way or am i doing it wrong?

Thanks

[Author]

Posts