How can i change the width of my collection title banner background

Hi my site URL is https://181f6d-2.myshopify.com

and the password is skielu

So I have some of my pages, that are individual pages that show multiple collections (or sub collections) with the title “Glitter, Rhinestones & Pearls” done as a rich text banner (rather than a collection title banner)

from this page I then click on a collection, which will show all the products in that specific collection, and at this point I get this collection title banner - full width see below (it has a gradient background colour scheme which i want to keep).

My Problem is I want to make this section as wide as the one shown on my first pic (so not full width) but haven’t a clue where to start.

I’ve tried all other suggestions I’ve found on the community about banner width etc but the coding doesn’t seem to be specific to what I’m needing.

Many Thanks in advance

Hi @Cath11021

Check this one,.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-hero {
    max-width: 100rem;
    margin: auto;
    border-radius: 6px;
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

you are amazing, thank you :slightly_smiling_face:

1 Like