Header not lining up with content

  • thepapalazarou

    (@thepapalazarou)


    7 years, 5 months ago

    Hi,

    I’m trying to get my header and content aligned on the left and right hand sides. The Layout Style is set to “Wide” in the customiser with Main Container Width set to 1200px. The content is set up in Elementor with the Content Width set to “Boxed” and 1200px wide.

    When the browser is wide enough to accommodate the content everything lines up as it should but as soon as the window is made smaller than 1200px the header moves inwards but the content does not.

    I assume there’s some CSS applying some padding to the heading but how do I find out what that setting is, modify it and / or replicate it in Elementor so the content behaves in the same way?

    Thanks.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Amit Singh

    (@apprimit)

    7 years, 5 months ago

    Hi,

    Try to adjust the width from the Elementor editor. Additionally, you can use the below code to fix it.

    @media screen and (max-width: 1280px) and (min-width: 960px) {
.elementor-column.elementor-col-100, .elementor-column[data-col="100"] {
    width: 90%;
    margin: 0 auto;
}
}
    Thread Starter thepapalazarou

    (@thepapalazarou)

    7 years, 5 months ago

    Hi Amit,

    Thanks for the reply.

    I’ve tried the code but that doesn’t seem to work.

    To be honest I’d like to do it from within Elementor but I just can’t seem to get it to work.

    If I have a section in Elementor with some content in, how do restrict the width of the content to 1200px unless the browser window is smaller and then in which case make it 90%?

    Thanks.

    Amit Singh

    (@apprimit)

    7 years, 5 months ago

    Hi,

    Please try the code again with !important –

    @media screen and (max-width: 1280px) and (min-width: 960px) {
.elementor-column.elementor-col-100, .elementor-column[data-col="100"] {
    width: 90% !important;
    margin: 0 auto;
}
}

    Please contact Elelentor support team if you want to do with Elementor.

    Thread Starter thepapalazarou

    (@thepapalazarou)

    7 years, 5 months ago

    Thanks again.

    Still no luck though. That CSS seems to do the same thing as the previous CSS you posted. It does have some effect (regardless if !important is used or not) but the width of the content and header still don’t match at various browser widths.

    Are you sure the 1280px and 960px are right? Why 1280 and 960?

    Also, am I right in thinking that “.elementor-column.elementor-col-100” and “.elementor-column[data-col=”100″]” are classes attached to all Elementor columns set to 100% width?

    Thanks, this is all much appreciated.

    Amit Singh

    (@apprimit)

    7 years, 5 months ago

    I used inspects tool to fix it. I was wrong.

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

The topic ‘Header not lining up with content’ is closed to new replies.