Strange issue with collection headers

Topic summary

A user encountered a layout issue where their collection page header and its contents displayed at only 2/3 page width instead of full width, disrupting the site’s visual consistency.

Problem Details:

  • Collection header not spanning full page width
  • Previous CSS attempts (width adjustments and padding in base.css) had no effect
  • Additional concern: logo images under top navigation links appearing too small when stretched

Solution Provided:
A community member offered CSS code to be added to the theme.liquid file (placed above the </body> tag). The solution successfully resolved the width issue.

Status: Resolved. The user confirmed the fix worked as intended.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Hey, So, I am working on a new site for us, and, the image will show this, short version, the header from the collection is only about 2/3rd of the width, as is everything in it, and, its throwning off my “look”

I would like it to cover the same width as the rest of the page, and, ideally, be able to centre it

I have added the following after looking on here

Which i understand should stretch it across, and also add a little padding at each site, but, its not doing anything at all. I also added this as I saw in another column, on the bass.css file

But, it still looks like the screenshot in the beginning of this post. Where am I going wrong?

URL is https://jhs-b2b-test.myshopify.com/

I am having issues with the logo images under the links at the top, I want them all the way across but, cant find a way to do it without them being tiny! But i can cope with that at the moment

Cheers

1 Like

Hey @JJWatt

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like

Brilliant, thanks for that :slightly_smiling_face:

1 Like

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.