[Support request] How to change Padding in Page header for mobile

Home Forums Support How to change Padding in Page header for mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #482326
    gstarr

    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.

    GP Premium 1.5.6
    #482658
    Leo
    Staff
    Customer Support

    Hi there,

    Try this:

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

    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!

    #486496
    Leo
    Staff
    Customer Support

    This would exclude that page only:

    @media (max-width: 768px) {
        body:not(.page-id-2112) .page-header-content-container {
            padding: 150px;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.