Archived topic

How to change Padding in Page header for mobile

3 replies · Started by gstarr on January 29, 2018

Viewing posts 1–4 of 4

January 29, 2018 at 3:41 am #482326

Hi,

I have a page header enabled on the homepage.
Top and bottom padding are set to 250px and so is left and right padding.
All to 250px. The problem is when I open this site on the mobile phone.
On a mobile phone, it looks perfect if I set it to 150px.
I tried to fix this with CSS:

media (max-width: 768px) {
padding-top: 150px; !important
padding-bottom: 150px; !important
padding-left: 150px; !important
padding-right: 150px; !important
}
but that does not work.

Any help would be appreciated.

January 29, 2018 at 8:56 am #482658

Hi there,

Try this:

@media (max-width: 768px) {
    .page-header-content-container {
        padding: 150px;
    }
}

February 2, 2018 at 12:46 am #486202

Hi,

That looks like a perfect solution, except that I use smart slider on a page -> Program -> Beauty Fitjoga
and this one gets borked.

Is it possible to exclude that page from this css? Or maybe some other solution?

Thanks!

February 2, 2018 at 8:20 am #486496

This would exclude that page only:

@media (max-width: 768px) {
    body:not(.page-id-2112) .page-header-content-container {
        padding: 150px;
    }
}

This archived topic is closed to new replies.

Start building better websites today.