Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • October 11, 2021 at 1:12 pm #1324414
    langpj

    My website is set for 1300px wide (boxed), but the header has padding on the left and right (making the header container 1248px wide).
    The logo on the left, and the cart icon on the right are inset from the edge by 26px.
    Please can you help me remove this padding.

    October 12, 2021 at 5:07 am #1324471
    Rikard

    Hey langpj,

    Please try the following in Quick CSS under Enfold->General Styling:

    .html_header_top #top .av_header_stretch .container {
    width: 100%;
}

    Best regards,
    Rikard

    October 12, 2021 at 8:30 am #1324499
    langpj

    Thanks Rikard,
    That works great on a desktop, but unfortunately on a mobile the logo and menu/cart icon are still inset from the edges quite a bit. Do you have some code for that?
    Thanks,
    Peter

    October 12, 2021 at 2:02 pm #1324566
    Ismael

    Hi,

    Thank you for the update.

    You can add this css code to adjust the width of the header container on mobile view.

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
        width: 100%;
        max-width: 100%;
    }
}

    Default width is set to 85%.

    Best regards,
    Ismael

    October 12, 2021 at 2:09 pm #1324571
    langpj

    Hi Ismael,
    That’s great, thanks. It does fix the header.
    However, the footer and socket, and also a row have lost their padding – the content is right against the left hand border. Is there a way we can just have the header changed?
    Thanks,
    Peter

    October 13, 2021 at 6:06 am #1324669
    Rikard

    Hi Peter,

    Please try this CSS as well:

    @media only screen and (max-width: 767px) {
#footer .container {
    width: 85%;
    max-width: 85%;
}
}

    Best regards,
    Rikard

    October 13, 2021 at 8:17 am #1324691
    langpj

    Hi Rikard,
    Thanks – but this has not resolved it – the footer, the socket still has zero padding from the left edge. THe colour section on the home page also has no padding.
    Cheers,
    Peter

    October 13, 2021 at 12:16 pm #1324723
    Rikard

    Hi,

    The code I sent is applying on my end, please check in an incognito or private browser window. What are you looking to change in the Color Section?

    Best regards,
    Rikard

    October 13, 2021 at 12:33 pm #1324732
    langpj

    Hi Rikard,
    Even in an incognito browser window (Google Chrome) the footer has no padding, and the colour section (on the home page). I don’t want to change the footer or the colour section – just want to have the header with no padding – logo fully left and the cart icon fully right.
    Actually – all of the padding is lost with that extra code – the products as well.
    When I remove the code (the last 2 sent) there is padding on the footer and the colour section, and on the products.

    So maybe the code is affecting the whole page, not just the header.:
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
    }
    }

    Thanks for your help!

    October 13, 2021 at 2:57 pm #1324762
    Rikard

    Hi,

    Please remove the CSS Ismael sent, and add this instead:

    @media only screen and (max-width: 767px) {
.av-logo-container {
    width: 100%;
    max-width: 100%;
}
}

    Best regards,
    Rikard

    October 13, 2021 at 3:25 pm #1324768
    langpj

    Thanks Rikard,
    I did that, but no effect unfortunately (on the mobile – logo and cart icon still inset from the margins). It is working on the desktop however.

    My code now reads:
    .html_header_top #top .av_header_stretch .container {
    width: 100%;
    }

    @media only screen and (max-width: 767px) {
    .av-logo-container {
    width: 100%;
    max-width: 100%;
    }
    }

    Cheers,
    Peter

    October 14, 2021 at 4:25 am #1324835
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) {
.av-logo-container {
    width: 100% !important;
    max-width: 100% !important;
}
}

    Best regards,
    Rikard

    October 14, 2021 at 8:09 am #1324861
    langpj

    That has done it!
    Many thanks.
    Cheers,
    Peter

    October 14, 2021 at 2:30 pm #1324937
    Rikard

    Hi,

    Great, I’m glad to hear that it’s working now. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    October 14, 2021 at 2:58 pm #1324950
    langpj

    You can close it.
    Thanks again,
    Peter

    October 15, 2021 at 4:39 am #1325028
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Padding on sides of header’ is closed to new replies.