Site logo

Archived topic

Space - padding or margin on mobile

6 replies · Started by David on August 17, 2021

Viewing posts 1–7 of 7

Hi everyone,

On a site my graphics designer and I are working on, one page has a large gap when viewed on mobile below the logo/hamburger menu.
Can't for the life of me work out where it is coming from, I've not checked every page, but most others seem OK.
Link supplied....

Regards, Dave

ps - I can see that if I change this CSS to:

.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header {
    padding: 10px 20px 100px 20px;
}

(padding top change to 10px from 100px)
it fixes it, but I don't know why this is only on this page!
(only changed in inspect!)
Dave

Hi there,

can you link us to sample pages where it's not being fixed?

Also, can you share how you're adding the CSS?

Let us know. :D

Thanks Elvin,
I thought I did link - but here it is again.
The CSS I spotted is my viewing it in the inspector on Firefox Developer - I didn't change it anywhere, it just confirmed to me that changing that 100pixel value to 10pixel changed it.
But that seems to be a global CSS entry, so I'm at a loss to know why it is only an issue on that page.
If you go to the About page you will see it is fine!
Dave

For starters:

The about page and pages like it uses a Layout Element. It adds a different selector which actually removed the padding. (these pages have 0 padding).

Layout Element with "Full-width (no-padding)" applies to them (ex. the about page).

The CSS is likely not working because it losses out on CSS precedence as it's some pages have more specific selector (.full-width-content included)

Thanks Elvin,

Brilliant, I understand that now - all good...

Dave

No problem. Let us know if you need further help. :D

This archived topic is closed to new replies.