Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1324414

    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.

    #1324471

    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

    #1324499

    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

    #1324566

    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

    #1324571

    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

    #1324669

    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

    #1324691

    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

    #1324723

    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

    #1324732

    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!

    #1324762

    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

    #1324768

    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

    #1324835

    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

    #1324861

    That has done it!
    Many thanks.
    Cheers,
    Peter

    #1324937

    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

    #1324950

    You can close it.
    Thanks again,
    Peter

    #1325028

    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

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Padding on sides of header’ is closed to new replies.