Category Page Padding – Moble

  • Resolved ENJOOY GmbH

    (@serapiony)


    4 years, 9 months ago

    Hello,

    I have been scratching my head on how to reduce the padding between the header and category title. The excess padding is most obvious on mobile versions. But would like to reduce the padding on mobile and desktop. Any CSS code would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • Peter Lawrenson

    (@lorro)

    4 years, 9 months ago

    Try:

    .clb-page-headline-holder {
  padding-bottom: 0 !important;
}
    Thread Starter ENJOOY GmbH

    (@serapiony)

    4 years, 9 months ago

    Thanks, but still have the extra padding.

    Peter Lawrenson

    (@lorro)

    4 years, 9 months ago

    Yes I can still see the extra padding.

    I can’t find the style in the page. Where did you put it? Please put it at:
    Dashboard > Appearance > Customize > Additional CSS

    If it doesn’t work, leave it in so I can debug it with browser tools.

    Thread Starter ENJOOY GmbH

    (@serapiony)

    4 years, 9 months ago

    Thanks for following-up. I just placed it on under Additional CSS

    Peter Lawrenson

    (@lorro)

    4 years, 9 months ago

    I can see it now. Next, flush the Rocket css cache or deactivate the plugin.

    That should remove the padding under the heading. There is some more padding above the breadcrumb if you want to remeove the total space further.

    Thread Starter ENJOOY GmbH

    (@serapiony)

    4 years, 9 months ago

    Thanks. Cleared the cache from WP Rocket. I think the padding on top of the breacrumb is fine. It is mainly the space ablve the title and below the menu and cart icon.

    Plugin Support abwaita a11n

    (@abwaita)

    4 years, 9 months ago

    Hi @serapiony,

    Good to hear that the breadcrumbs space is fine.

    As for the space above the title, could you try using the following in your Customizer → Additional CSS:

    .clb-page-headline .clb-title {
    margin: -20px 0px !important;
}

    Hope this helps.

    Thread Starter ENJOOY GmbH

    (@serapiony)

    4 years, 9 months ago

    Hello – Thanks a lot Loro and Abwaita, but unfortunately still have that extra padding above the title.

    Mirko P.

    (@rainfallnixfig)

    4 years, 9 months ago

    Hey @serapiony,

    unfortunately still have that extra padding above the title.

    This is what I see on mobile view. Indeed, there is an extra empty space there.


    Link to image: https://i.imgur.com/RenYXdM.png

    Try this CSS to fix this on mobile and tablet:

    
/* reduce headline min height on mobile and tablet */
@media only screen and (max-width: 768px){
.clb-page-headline {
min-height: 10vh !important;
}
}

    Hope this helps.

    Thread Starter ENJOOY GmbH

    (@serapiony)

    4 years, 9 months ago

    Thanks Mirko – That did the trick !!

    Plugin Support abwaita a11n

    (@abwaita)

    4 years, 9 months ago

    Glad to hear Mirko’s code worked – thanks for letting us know!

    I’ll mark this thread as resolved now. If you have any other questions, please feel free to create a new thread.

    Cheers!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Category Page Padding – Moble’ is closed to new replies.