Section is not responsive spacing-wise

Hi there,

On the mobile version that I am designing, I cannot get a certain section to be spaced out right. I can get it to look right on the screen, but upon testing the responsiveness it moves up or down too far and overlaps with other sections/elements. Can someone tell me what I’m not seeing/ doing wrong? all the other sections on my page are responding correctly. It is on the home page, the section underneath the feature box that is titled “Transparency”. Below is my read only link. If someone could help out it would be greatly appreciated!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

The Transparency box is not even showing up right now because the other section is overlapping it- where it says “Learn more. Get a demo.”

Hi @MarkFisk52, I was able to find a fix for this by moving Container Grid 2x2 directly into the section feature1. There’s a lot of nested divs that seem to be pushing the container grid around. I’m sure someone more skilled than me could provide a better fix but this should help for now.

1 Like

@MarkFisk52 @John_Rich

I think I found the settings causing the unwanted shift. Have a look at your container at the breakpoint Mobile landscape. You have set negative top and bottom margins. Furthermore, there is height: 30%; and max-width: 1200px;. Remove these fixed values and any negative margins. That should work.

Let me know of this helps.

Thanks so much for the help! I will do what I can with these thoughts!

1 Like