How to change vertical margins

  • sricciar

    (@sricciar)


    7 months ago

    Hello,

    I am using Woocommerce with the default storefront theme.

    Iwanted to reduce the vertical margins of the widget just below the header, where I have the shipping, returns and payment information (“Envío”, “Devolución”, etc.) but I can’t do it with a custom CSS.

    In principle it should be the class=”header-widget-region”, but I can’t do it.

    I also wanted to reduce the vertical margins of the two bars at the bottom of the page, where all the links ?Legal notice, etc.? (“Aviso Legal”, etc.) are and where it says ?BioEnergy Sport ? Registered trademark?.

    Thank you very much for your help!

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

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

  • This should be enough for the distance above:

    .home.post-type-archive-product .site-header { margin-botto: 0 !important }

    Below I’m not sure exactly which distances you mean. You can mark them with arrows in a screenshot. How you can provide a screenshot is explained here: https://www.ads-software.com/support/forum-user-guide/block-editor/#adding-screenshots

    Thread Starter sricciar

    (@sricciar)

    Hi, thank you very much for your support. I’ve put the code in the CSS personalization, but it doesn’t work (it’s put in this moment).

    View post on imgur.com
    Home page

    I’ve also noticed that the extra margins or paddings) are only in the home page (first screenshot), but not in the categories page (second screenshot). Instead, in the categories page there are extra margins somewhere else (also highlighted with red arrows) which I would like to reduce as well.

    View post on imgur.com
    Category page: the banner looks good but there’s too much margin between other elements (red arrow).

    As for the bottom margins, (perhaps the easier to solve), you can appreciate them in the third screenshot.

    View post on imgur.com

    I really appreciate your help and I hope I’ve been clear enough.

    Thread Starter sricciar

    (@sricciar)

    Hello,

    your code for reducing the margin in the home page was correct, it worked!

    The problem was that I had a spare “}” in my CSS personalization just before your code, that’s why it didn’t work.

    I’ve also temporary solved the margins the Products Category but disabling a piece of code to hide the titles in the pages.

    The last thing I can’t do is to reduce the margins in the footer (following Screenshot):

    Many thanks for any help, much appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change vertical margins’ is closed to new replies.