• Resolved onlinecnctns

    (@onlinecnctns)


    Hi all, currently have this site set to max width 1500 px. Problem is Im trying to center the site so anything larger than 1500 px will have the site set in the middle. Im able to set the nav and body but the header and footer stays put.

    This is the css I have:

    body {
        max-width: 1500px;
        margin: 0 auto !important;
        float: none !important;
    }
    
    nav {
      max-width: 1500px;
      margin: 0 auto !important;
      float: none !important;
    }

    Tried header, footer, hfe_header, hfe_footer, hfe_render_header, and hfe_render_footer. Nothing.

    Any help is appreciated!

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter onlinecnctns

    (@onlinecnctns)

    @nikschavan Any help would be appreciated!!!

    • This reply was modified 6 years, 5 months ago by onlinecnctns.
    Plugin Author Nikhil Chavan

    (@nikschavan)

    Hello @onlinecnctns,

    I am not sure I have completely understood the question.

    Do you want all the content on the site to be 1500px wide?
    IF yes, then the simplest way to do it will be from Elementor. IT allows you to set up content width and there you can set width of 1500px.

    Thread Starter onlinecnctns

    (@onlinecnctns)

    Hi @nikschavan, yes I want the entire site to be 1500 px wide max. However, when looking at the site on a larger screen, the body is centered and the header and footer stay left. The header and footer do not adjust to match the rest of the site. Id show you a screenshot if I could attach images.

    Plugin Author Nikhil Chavan

    (@nikschavan)

    The right way to do this is from elementor. Set content width for the section and that should align the content correctly.

    You have some rows set to align fullwidth and adding custom CSS to limit that will create conflicts in designs from elementor’s layouts so better handled the right way.

    Thread Starter onlinecnctns

    (@onlinecnctns)

    @nikschavan I removed the custom CSS and set the content width in Elementor and now the site stretches as wide as the screen instead of a max-width of 1500px.

    You can try working with media screens in CSS
    basically, add a CSS class to the whole header/footer and then add some additional CSS and play around with it in the WP customizer so you have a live view on whatever you add.

    I will use .headcontainer for header container class
    I will use .menuitems for menu links class

    I would try adding this:

    @media only screen and (min-width: 1500px)
    {
    .headcontainer{
    max-width:1500px !important;
    }
    
    }

    Also, you said that the footer and header do not align on larger screens than 1500 so if its the menu links you are talking about it should look like this:

    @media only screen and (min-width: 1500px)
    {
    .headcontainer{
    max-width:1500px !important;
    }
    .menuitems{
    text-align:center;
    }
    
    }

    If its the whole container you are talking about it should be something like:

    @media only screen and (min-width: 1500px)
    {
    .headcontainer{
    max-width:1500px !important;
    margin-left:auto;
    }
    
    }
    • This reply was modified 6 years, 5 months ago by keden12.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Need header footer tags/code’ is closed to new replies.