Column margin space on different screen sizes

Hi there

https://wordpress-171232-956414.cloudwaysapps.com/

So, this is a tricky one. I want the spacing above the text to be even, but as you can see, the image to the right (with the circles) is taking up most of the height, so when the screen shrinks to smaller sizes, the margin above the text does in that top paragraph, but the section below, respects its set top margin, so it looks bigger on smaller screens:

Is there any way to keep them the same on smaller devices? so reduce the margin top and bottom on the section below, but only for smaller screens?

Thanks.

Hello @logoglo,

Thanks for writing in! I have inspected the page and I can see that you added top: -20px; in one of the column settings. Please remove it because that is what is causing your issue. Before remove any of the empty spaces and make sure that they are the same, please check out this knowledge base article first:

The element spacing, margins, and paddings of all the elements will contribute to the empty spaces on the page.

Hope this helps.

1 Like

kinda, but the margins in the section below will always be bigger as I explained with the image…

Anyway I can add more margin to the top section with text and image, only on ipad and mobile?

The important margin is the text, top and bottom, but because of the inage, I cant set them equally in both sections. so top has 50/60 top bottom, section underneath has 100/120px top bottom, to make them equal on a desktop, problem comes when that image shrinks on smaller screens, the margin stays at 60 top, and section below at 100…

I figured it out, added a class to the top section, then added this code:


@media(max-width:1151px){
   .topsection {
margin-top: 100px !important;
     margin-bottom: 90px !important;
    }

Its looking good now…thanks for your help, you actually got my brain in gear hehe.

Glad you sorted things out, we are happy to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.