Trouble making header margins equal to content margins

  • Resolved themoonymarigold

    (@themoonymarigold)


    2 years, 8 months ago

    Hi there,

    Rookie designer here! I am using Elementor Pro to do the bulk of my web design, and have set my content margins 5% of the full width (5% on the left & 5% on the right). I’ve done this by setting the padding-left and padding-right values to 5% for each full-width section. All my sections are full-width (not boxed), and in the WordPress customizer my layout > container > margins are set to full-width.

    The header can only be edited in the customizer (not with Elementor) and for the life of me I can’t get the header to line up with content margins across all screen sizes. I’ve been using 5vw because I figured 5% of the viewport width should equal 5% of a full-page-width parent element. Even if these values are slightly off, going higher or lower does not fix the problem as even if it works for one screen size it does not work for another.

    Thanks in advance for your help/insight into this issue!

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

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

  • Hi @themoonymarigold!

    It’s possible to target different screen sizes using media queries, then target the header with CSS and set the desired margins for it based on those screen sizes. You can find out more about media queries here.

    I hope this helps!

    Thread Starter themoonymarigold

    (@themoonymarigold)

    Hi @luciamarinescu, thanks for your response! But actually I’m having issues because I have been trying to set the margins using css and media queries (see the 2nd paragraph of the OP for more detailed context).

    I’m not sure what I’m doing wrong. In Elementor Pro I use a 5% right, 5% left margin for 768px screen width and larger, 8% for mobile or less than 767px. For the life of me I can’t seem to replicate this in the wordpress customizer (using media queries and css) where I have to edit the header.

    Hi @themoonymarigold!

    I’ve tried the code below on your site using the Inspector element and it seems to align the header as I understand you’d like to.

    @media(max-width: 767px){
.header {
    margin-right: 20% !important;
    margin-left: 20% !important;
}
}

@media(min-width: 768px){
.header {
    margin-right: 5% !important;
    margin-left: 5% !important;
}
}

    If this isn’t what you want to achieve, please provide us a screencast where the issue can be seen.

    Have a nice day!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Trouble making header margins equal to content margins’ is closed to new replies.