[Resolved] Keeping header, footer and content sections contained

Home Forums Support [Resolved] Keeping header, footer and content sections contained

Home Forums Support Keeping header, footer and content sections contained

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2046210
    ch1800

    Hello,

    For most sites that are using large images or video in headers I follow those instructions provided here by David and they always work great.

    This time I just compiled the layout from an existing site that is using video in homepage header for a new design that is similar and also using a video but it doesn’t seem to work.

    @media(min-width: 1401px) {			
      .page-hero {
        height: 788px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
      }
    }

    In fact, I initially thought the issue was with the video header and the footer but after checking the other pages that are not using sections it seems that the issue is rather with all testing sections at homepage and not with the header and footer.

    #2046816
    Ying
    Staff
    Customer Support

    Hi there,

    Can you go to customizer > layout > container and set the container width to 1680pxto match your content width?

    Let me know πŸ™‚

    #2046905
    ch1800

    Thanks Ying but doesn’t seem to work, unfortunately.
    It is currently set that way so you can check it from your side.

    All other sites using this container snippet all have the container set to 1400 and it works fine, including the one with the cars and video header I sent you the link.

    Something else is blocking here and I really can’t find what…

    #2046927
    Elvin
    Staff
    Customer Support

    Hi there,

    I think the main issue here is because of the background color.

    The 2 sites actually have similar structure and they actually both have the same issue except the car4you site isn’t too obvious because it has no background color. If you add background color to some of its section, you’ll see that the car4you site actually has the same issue you’re encountering. See this – https://share.getcloudapp.com/ApuEZm87

    The easy solution is by adding this CSS:

    div#page {
        max-width: 1680px;
    }
    #2046934
    ch1800

    YES, that works now!
    You are right about the background, never thought about that.

    So, this snippet works if I have the container set at 1680, otherwise I should use 1400 apparently.
    But would you recommend setting the container to 1680 always when using the container snippet above

    @media(min-width: 1401px) {			
      .page-hero {
        height: 788px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
      }
    }

    or only when having backgrounds?

    Also, how did Ying find this value of 1680px, based on what exactly?

    Thanks.

    #2046969
    Elvin
    Staff
    Customer Support

    Customizer settings generate CSS for the theme.

    We inspect the page’s CSS through the browser’s devtool and figure out customizer settings the site has from there.

    So, this snippet works if I have the container set at 1680, otherwise I should use 1400 apparently.
    But would you recommend setting the container to 1680 always when using the container snippet above

    I think this is a matter of preference. I’m not exactly sure why you’ve set 1401px as the min-width but I can speculate that you’ve added that because you the page hero to be styled w/ 788px height if the viewport goes beyond the max width you’ve set on the car4you site (1400px).

    But since this new site doesn’t share the same container size (1680px vs. 1400px of car4you) then you may have to consider changing the min-width of the @media rule from 1401px to 1681px.

    But if I may recommend, consider being uniform to 1400px to all sites so you don’t have to maintain different codes for all of them. πŸ˜€

    #2046986
    ch1800

    Many thanks Elvin,

    I was asking about the 1680 container size Ying suggested because I never used such container and this site, only after her reply.

    Your speculation about setting 1401px as the min-width is correct (in fact it was David’s suggestion, not mine) and this is also the container size I had here at this new site. It was not set at 1680 before Ying’s recommendation and I would prefer keeping it at 1400, uniform as the other sites.

    So yes, I set it back to 1400 again and also your own snippet with same values.
    May I ask you to check again as it is now. For me, everything looks fine now.

    Thanks again.

    #2047146
    Elvin
    Staff
    Customer Support

    I was asking about the 1680 container size Ying suggested because I never used such container and this site, only after her reply.

    Not sure I get the context of why it was suggested but I believe it was likely an attempt to align everything as it looks like a simple content issue at first glance.

    I though so too at first to be honest. Had to double check and found more things. πŸ˜€

    No problem. πŸ˜€

    #2047179
    ch1800

    Great, all clear and many thanks to both of you!

    #2048095
    Elvin
    Staff
    Customer Support

    Glad you got it sorted. πŸ˜€

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.