How to make the collection list till the edge of the website

Store Design
, , , , , , ,
1

I am using dawn theme latest version, i need to make the collection list (home page) to full width (which means reference home page ( product page ) and collection page.

website: https://rugd-in.myshopify.com/

password: rugged

This much space
This much space1897×586 142 KB

2

Hey @Sivadarshan

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-1730103212438.png
Moeed_0-1730103212438.png1904×918 232 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hey @Sivadarshan ,

To make the collection list on the homepage full-width in the Dawn theme, follow these steps:

  1. Online Store > Themes > Edit Code

  2. Edit the CSS for the collection list:

  3. Open the file base.css or theme.css in the assets folder.

  4. Add the following CSS at the end of the file to adjust the width of the collection list on the homepage:

.collection-list {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.collection-list__item {
    width: 100%;
    flex: 1 1 auto;
}
  • Adjust the section layout:
  • Open the relevant section file for the collection list on the homepage. This might be section/collection-list.liquid or section/index-collection-liquid.
  • Look for any container classes or width-limiting divs. Modify these to ensure they span the full width by removing the container class or adding custom CSS classes if needed.
  • This should make the collection list on your homepage match the full-width style of the product and collection pages. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

4

Sooper it’s working, But I need to make this section as full width( same size to product listing )