Archived topic
Padding Between Div's
16 replies · Started by Alan on July 23, 2021
Hi
I seem to have a problem on my home page and I can't think of a better way of fixing it without using a lot of inline css.
The problem occurs when I add a "Section" to a page and then I divide the space within that section into two (left and right). When I view the page on a mobile there is no space between the image (in one Div) and the text below it (in the other Div). It appears that I need extra padding top and bottom on the left Div and the same on the right Div so when viewed on a mobile it creates space.
This was my current layout but there is no space between the image in the first Div and the heading in the second Div
<div class="grid-33 mobile-grid-100 tablet-grid-100">An Image Here</div>
<div class="grid-66 mobile-grid-100 tablet-grid-100">
<h2>My Heading</h2>
<p>Some Text Here</p>
</div>This seems to work but there is a lot of in-line css
<div class="grid-33 mobile-grid-100 tablet-grid-100" style="padding-bottom: 30px; padding-top: 30px;">An Image Here</div>
<div class="grid-66 mobile-grid-100 tablet-grid-100" style="padding-bottom: 30px; padding-top: 30px;">
<h2>My Heading</h2>
<p>Some Text Here</p>
</div>Thanks,
Alan
I already have top padding 90 and bottom padding 70 set in the sections padding area.
Is there a better way of fixing this problem.
Hi Alan,
This is a very outdated method to create columns layout.
Have you considered using the block editor with the grid and container blocks from GenerateBlocks?
https://docs.generateblocks.com/article/grid-overview/
https://docs.generateblocks.com/article/container-overview/
You will be able to create the exact same layout without writing a single line of CSS and HTML.
Hi Leo.
I have downloaded the plugin. I had a few problems working it out but its fine now. It seems a lot easier.
Thanks,
Alan
Glad to hear :)
I've rebuilt the entire page using Generate Blocks. I still appear to have a margin issue when I view it on a mobile.
The smoke alarm button is hard up on top of the smoke alarm photo in the next div.
The led downlight photo is hard up to the led headline in the prior div.
What is the best way of fixing that?
Do you want me to open a thread in GB?
Hi there,
The smoke alarm button is hard up on top of the smoke alarm photo in the next div.
The led downlight photo is hard up to the led headline in the prior div.
Not sure I see where these are. Can you provide any screenshots? and perhaps the link to the page where these elements are?
Let us know.
If I add 30px of margin top and bottom to the images it seems to fix it but is that the proper way?
You can add a vertical gap on your Grid block on mobile so there's spacing between the grid items.
Hi Elvin
Maybe I didn't build that page correctly.
1. First added a container.
2. Then I added a 2 column grid inside the container.
3. Then I added an image into the left side of that 2 column grid
4. Then I added a headline into the right side of that 2 column grid with a paragraph below it
The problem is happening because the image in the left hand half of the 2 column grid at step 3 is sitting right on top of the headline in the right hand half of the same 2 column grid.
How can I leave a gap when they are in the same grid? Was I supposed to add another grid inside the left hand side of the first 2 column grid and the add the image inside that?
Thanks
I've checked the 2 grids you have and they seem adequate to what I've suggested.
The first one has:
[ ( heading, p , button ) ( image ) ]
the 2nd one has :
[ ( image ) ( heading, p , button ) ]
Where [] is the grid and () are the columns. Columns are grid items and they would stack on mobile so having vertical gap will add a gap between the image and the button for the first grid and gap between the image and the heading on the second grid.
But yeah, adding margin top and bottom to the image should work as well. It's a matter of preference. Both won't be of significance to performance gain/loss. :D
Hi Elvin
Sorry I'm still a bit confused.
The problem is occurring within the same grid isn't it?
[ ( heading, p , button) No Space Here (image) ]
[ (image) No Space Here (Heading, p, button) ]
Check this page - https://dev-generate-press.pantheonsite.io/?page_id=17
I've laid it out the same way you did (Container > Grid > 2 columns). I basically just added vertical gap to the Grid block to add spacing.
Note: if the vertical gap is applied and saved but isn't reflecting on the frontend, try clearing cache and/or regenerating GenerateBlocks CSS.
Hi Elvin
Thanks so much for that. I viewed it on my mobile and its exactly how I want mine.
I don't think I'm highlighting the right block area when I try to add space because the image that you posted above at
#1870793
shows that the GRID is being highlighted. When I try to do it I cant find how to highlight that.
Is it this?
Hi Elvin.
Thanks so much for your patience today. I added 30px of vertical space in those divs. It seems to look ok. I had to compensate for it on a mobile by removing 30px spacing off the bottom of each container so that the coloured rows looked even.
Can you please let me know if it looks correct now.
Thanks again. Really appreciate the great support.
