New Shopify Certification now available: Liquid Storefronts for Theme Developers

How can I make a featured product section full width in Dawn theme?

Solved
plants4friendz
Excursionist
18 0 7

I would like to make it so that this section extends the entire width of the page.

 

Screenshot 2023-11-08 at 3.34.53 PM.png

 

Would anyone be able to advise?


Website: thespiralpath.myshopify.com

 

Thanks in advance!

Accepted Solutions (2)
Abdosamer
Shopify Partner
472 78 73

This is an accepted solution.

Hi @plants4friendz , add this css property to the section : 

max-width:100%;
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp

View solution in original post

Abdosamer
Shopify Partner
472 78 73

This is an accepted solution.

We will need to change some css, so navigate to section-multicolumn.css file and search for this piece of code 

.multicolumn-list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

 instead of padding :0 it will be 

    .multicolumn-list {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 5rem;
}
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp

View solution in original post

Replies 6 (6)
Abdosamer
Shopify Partner
472 78 73

This is an accepted solution.

Hi @plants4friendz , add this css property to the section : 

max-width:100%;
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp
plants4friendz
Excursionist
18 0 7

Amazing! Thank you so much. 

 

Do you happen to know how I can add padding to either sides of the trio of images so that there's white space on either side?

 

Screenshot 2023-11-08 at 5.23.43 PM.png

Abdosamer
Shopify Partner
472 78 73

Thanks, Do you mean on mobile view you want to add white space on the images sides?

 

Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp
plants4friendz
Excursionist
18 0 7

I want to add white space to the left and the right of the page so that the images aren't so overwhelming.

Abdosamer
Shopify Partner
472 78 73

This is an accepted solution.

We will need to change some css, so navigate to section-multicolumn.css file and search for this piece of code 

.multicolumn-list {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

 instead of padding :0 it will be 

    .multicolumn-list {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 5rem;
}
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp
plants4friendz
Excursionist
18 0 7

Thank you so much for your help!