Strange issue with collection headers

Store Design
, ,

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.
1

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”

Screenshot_44.png
Screenshot_44.png1715×777 181 KB

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

Screenshot_45.png
Screenshot_45.png731×366 9.13 KB

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

Screenshot_46.png
Screenshot_46.png510×195 7.36 KB

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
2

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:

Moeed_0-1743769485277.png
Moeed_0-1743769485277.png1885×912 198 KB

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

Best Regards,
Moeed

1 Like
3

Brilliant, thanks for that :slightly_smiling_face:

1 Like
4

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.