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

[Sivadarshan]

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

   

[Moeed]

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 </body> tag

<style>
slider-component.slider-component-full-width {
    padding: 0 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Sivadarshan]

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

[rajweb]

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