Why is my spacing of Images and Text in Blocks different between design and published view

Question

I have two related problems with spacing of Images and Text in Blocks that appears different in my published app, versus what is shown in Design View and Live View when editing the app.

Example 1: Images Design/Live View

Example 1: Images Published View

Example 2: Text Design/Live View

Example 2: Text Published View

NSGICOrganization · Answer

I checked and all 4 Widget Style Settings appear all to be the same.  I then deleted the first image card and replaced it with a copy of the second one, and the spacing problem between the first 2 and second 2 appeared in my design view.  There must be some non-visible attribute that is causing this spacing problem, so I deleted the first 2 image cards, and replaced them by duplicating the 3rd image card, and the spacing gap disappeared, and all 4 cards were evenly spaced again.  I made the content edits to the 2 image cards I had replaced and the published page now looks and works great.

BrunoSousa1 · Answer

Have you checked in the Widget Style Settings? What might be happening is that some images are in a certain percentage or pixels away from the left margin, and other images from the right margim. This will change the position of the images in relation to each other depending on the screen size.

It's very tricky to set this up.

You could insted use a Row Widget and put your 4 images in it, each occupying 3 spaces. This way they would be equaly spaced, and you would have to set the general postion of the Row Widget.

Let me know if this helps.