- This topic has 9 replies, 3 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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.
Customer Support
Hi there,
Were you able to resolve this?
I’m seeing something completely different from your screenshot:
https://www.screencast.com/t/ZylTsEtAeIf 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/#layoutLet me know if this helps 🙂
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.
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/0JKncVDFDWO0https://docs.generateblocks.com/article/responsive-controls/
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
Customer Support
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 - textThe 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 🙂
- You must be logged in to reply to this topic.
