Featured collection page width in dawn make full width

Shopify Discussion
1

Hi, I am struggling to make my featured colelction extend all the way to the edge on the left hand side, a while ago i put in some code to restrict the width but now with new theme updates i would like it to be back to the edge. At the moment my page looks like this.

proockey_0-1729703322908.png
proockey_0-1729703322908.png1919Ă—1079 304 KB

But I would like it to look like this instead

proockey_1-1729703349462.png
proockey_1-1729703349462.png1919Ă—1074 333 KB

I would appreciate who can help with the code i need to add to teh base.css file

1 Like
2

Hi @proockey

Please, share your store URL. Thanks!

3

Hi thanks for the reply here is my url/

Shop Our Field Hockey Chamois Grips & Tapes - ProChamois™

4

Hi! It sounds like the custom code you previously added is still restricting the width of your featured collection, even after the theme updates. To fix this and make your collection extend to the edge, you’ll need to either remove or modify that code.

Here’s a quick guide to help:

  1. Locate the custom CSS: Go to your theme’s code editor (Online Store > Themes > Actions > Edit Code) and find the custom CSS you added. It might be in a file like theme.scss.liquid, style.css, or similar.

  2. Look for width or padding restrictions: Check for any CSS rules related to .featured-collection, .container, or .wrapper. Look for width, padding, or margin settings like this:

    css

    Copy code

    .featured-collection { max-width: 1200px; /* or any specific value */ margin-left: auto; margin-right: auto; }

  3. Adjust or remove the code:

    • If you see a max-width or padding-left/margin-left that restricts the layout, you can remove it or set it to 0 to allow the collection to go edge-to-edge.
    • Alternatively, you can update it to:
      css

    Copy code

    .featured-collection { width: 100%; padding-left: 0; }

  4. Save and Preview: After making these changes, save the file and preview your page to check if the featured collection extends to the edge.

1 Like
5

Thanks for the info, check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
@media screen and (min-width: 990px) {
    .collection .slider--desktop .slider__slide:first-child {
        margin-left: 0;
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

6

Thanks for the help. Unfortunately that didnt work so I must still have taht code somewhere I am trying to look for it now

7

Add more closing bracket on the top. Like this.

Made4uoRibe_1-1729705367845.png
Made4uoRibe_1-1729705367845.png608Ă—241 5.96 KB

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

8

Hi I added more brackets but it still hasnt worked, is there a way you can see my code and find the issue

9

Hi thanks I have managed to fix it I put your code into teh individual collection featured liquid file, thank you so much for the help