Jump to content

Adjust Max Header Width to Match Content

Recommended Posts

  • Replies 11
  • Views 2.1k
  • Created
  • Last Reply
1 hour ago, cvanuch said:

@tuanphan Thank you, I tried this and it caused the page content to go the full width of the screen instead of retaining my max site width setting. Is there a way to target the site header specifically to applied the same max site width?

<style>
  #page .content-wrapper, header#header {
  	max-width: 100%;
    width: 100%;
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan Thanks for the reply, the same thing happened. To clarify, I want to move the header inward, to align with the content when shown on a larger display. I already applied a capped page width of 1324px which works fine on the page content, but isn't affecting the header. Here's a screenshot illustrating what I mean.

BTS Site Header Screenshot.png

Link to comment
  • 3 weeks later...

@tuanphan @rwp Do either of you know how I can shift the header in to match the width of the page content? To clarify, I want to move the header inward, to align with the content when shown on a larger display. I already applied a capped page width of 1324px which works fine on the page content, but isn't affecting the header. Here's a screenshot illustrating what I mean. Thanks!

Screen Shot 2020-08-17 at 6.57.43 PM.png

Link to comment

@rwp Thanks! It seems to work but the white bar doesn't span the whole width of the screen. Do you know how to expand it? Also, on the Product Gallery page and Product pages, they aren't following the site's max width. Would you know how to adjust their width to match the rest of the site? Here's a screenshot.

 

Screen Shot 2020-08-18 at 3.13.35 PM.png

Link to comment
  • 4 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.