Site logo

Archived topic

Editing This Image on a Page

9 replies · Started by Niall on December 12, 2022

Viewing posts 1–10 of 10

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

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.

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.

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.

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.

That worked perfectly - thank you! Appreciate the support.

No problem :)

This archived topic is closed to new replies.