[Resolved] Editing This Image on a Page

[Niall]

Hi There,

Wondering how I can move these images a little bit in toward the middle so there is not so much spacing between them. See the image link below. Clicking to justify the items in the center brings them too close together. Wanting to adjust the distance more. I am using your Agency site.

https://imgur.com/a/VUUeJq5

[Leo]

Hi there,

Were you able to resolve this?

I’m seeing something completely different from your screenshot:
https://www.screencast.com/t/ZylTsEtAe

If not then I would recommend using a Grid block to insert the image blocks:
https://docs.generateblocks.com/article/grid-overview/

Then you can use the gap options to control the spacing:
https://docs.generateblocks.com/article/grid-overview/#layout

Let me know if this helps 🙂

[Niall]

Thanks, Leo. Can you still see my draft? I built it in desktop mode and I’m wondering how I can get it to look good in tablet and mobile mode as well. When I switch over to those 2, the alignment doesn’t look right, and the elements on the page are not presented well. I did need to change the spacing with margin and padding adjustments to the containers to make those elements look better spaced and the way I wanted them when I built it, so not sure if maybe that is having an effect as well.

[Leo]

Instead of using the alignment on the image block, can you try setting that back to default then use the alignment on the container block?

Then you can set different alignments for responsive views:
https://www.screencast.com/t/0JKncVDFDWO0

https://docs.generateblocks.com/article/responsive-controls/

[Niall]

Thanks, Leo. Here’s a screencast I recorded to show what I’ve been doing, which I think is what you suggested. Let me know what I might be doing wrong with the alignment of these containers – https://www.loom.com/share/00a2ae3098d24a158bb33b1098467df8

[Ying]

Hi Niall,

You are now using 1 Grid for images, and 1 Grid for the text, this is not going to work on mobile.
Taking the 123 section as an example, the responsive structure should be:

- Grid
  - Container 1
    - image
    - text
  - Container 2
    - image
  - Container 3
    - image
    - text
  - Container 4
    - image
  - Container 5
    - image
    - text

The text needs to be in the same container as the image, and I recommend using the image block from GenerateBlocks instead of the WP image block, as it has better alignment control for different devices.

[Niall]

Thank you, Ying, that did help. I was able to set up the formatting correctly, however am still running into some spacing issues on mobile when I try to accommodate for the text spacing in the send grid. Here is a quick breakdown screencast to show you – https://www.loom.com/share/ed1ec2ddb45b4f95bb9bd841d3c2e44b

Wondering if you can shed some light on what I am doing wrong here?

Thank you.

[Ying]

Hi Niall,

Glad the structure works.

As for the spacing, please remove the text margin, but select the Grid block, and set a horizontal gap, it will automatically add spacing between each grid container.

For the spacing between containers when they are stacked on mobile, you can also select the Grid block, and set a vertical gap for them.

[Niall]

That worked perfectly – thank you! Appreciate the support.

[Ying]

No problem 🙂

[Author]

Posts