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

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

Sivadarshan
Shopify Partner
112 1 12

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.

 

websitehttps://rugd-in.myshopify.com/

password: rugged

Screenshot 2024-10-28 133740.png   

Replies 3 (3)

Moeed
Shopify Partner
5793 1575 1870

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:

Moeed_0-1730103212438.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


Sivadarshan
Shopify Partner
112 1 12

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

rajweb
Shopify Partner
210 15 13

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

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com