Page Editor Preview not Matching Page

For some reason the way that these pictures are set works in the page builder, but it doesn’t work on the actual site. I set the image width of each picture to 32% with a 2% margin between each. 32% + 2% + 32% + 2% + 32% should mean that this set up should work. Can you help out with this?

Page builder

Actual Page

Hi There @w3developing

Thanks for writing in! It’s because you had different margins for different images. I have set an example margins there and now the images are aligned properly. You can further adjust it accordingly.

Thanks!

Correct the margins are only for the inside of the group, but I tried this anyway and it doesn’t fix the issue. Do you have another solution?

Hi,

It seems to look the same on my end for Page Builder and Actual Page

See screenshots

Actual

Builder

Please try to clear your browser cache and check again.

Thanks

Sorry that is because I didn’t put the correct margins back. I have cleared my cache, and it is still there. Could you take a look again?

Hello There,

This were your actual margins:



Please make sure that they have the same margin. If you want a 3 column image, make sure that only the 1st has 0 left margin and the 3rd images has 0 right margin which you already did have. For best results, please use 31% as the width of the images.

Hope this helps.

1 Like

Ok, but you agree that the numbers are 100% and should work?

Hey There,

32% + 2% + 32% + 2% + 32% adds up to 100%. The problem is that there are other factors in place here and there might be gaps or margin of the image which is inside the 32% container of the image. Another thing is that with percentage, the image will adjust itself and set a width like 150.xx and that decimal might exceed to the 100% total which usually the case. That is why, adjust to 31% might works best.

Hope this explains it briefly.

1 Like

That’s good to know. Thank you very much!

You’re more than welcome, glad we could help.

Cheers!

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