website link : https://bsv-safetyproducts.myshopify.com/collections/finger-opening-sleeves
How can i can collection page banner size and i want side bar like this.
This is reference image
This is current website
Topic summary
Goal: adjust the collection page banner size and add a sidebar to match a provided reference design on a Shopify store.
Current status: one member shared a CSS approach; another offered general design help; a subsequent participant reports they cannot change the banner height and requests further assistance. No confirmed resolution yet.
Proposed solution: add CSS in base.css using media queries to tweak desktop layouts:
- For wide screens (min-width: 1630px) and mid-range screens (1025–1629px), the code targets “#HeaderCollectionSection-template–22595065446718__banner .collection-header.container-1170”.
- It adjusts padding-left and max-width to reposition/enlarge the header content. A result screenshot shows improved alignment/spacing.
Limitations/open questions:
- The shared CSS modifies padding-left and max-width, which affects layout/alignment but not explicit banner height. The height issue remains unresolved.
- Sidebar implementation (as in the reference image) was not provided; only an offer to help privately.
Media: multiple screenshots are central—one reference layout, one current site, and a result showing the CSS effect.
Outcome: discussion is ongoing; specific instructions to change banner height and add a sidebar are still needed.
Are you looking for someone to share the code?
I can help you with design changes.
Please connect further
Add this code in your base.css file:
@media (min-width: 1630px) {
#HeaderCollectionSection-template--22595065446718__banner .collection-header.container-1170 {
padding-left: 11% !important;
max-width: 1400px !important;
}
}
@media (min-width: 1025px) and (max-width: 1629px) {
#HeaderCollectionSection-template--22595065446718__banner .collection-header.container-1170 {
padding-left: 21% !important;
max-width: 1400px !important;
}
}
Result:
