Solved

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

plants4friendz
Excursionist
21 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
821 146 161

This is an accepted solution.

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

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

View solution in original post

Abdosamer
Shopify Partner
821 146 161

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;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio

View solution in original post

Replies 6 (6)

Abdosamer
Shopify Partner
821 146 161

This is an accepted solution.

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

max-width:100%;
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
plants4friendz
Excursionist
21 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
821 146 161

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

 

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
plants4friendz
Excursionist
21 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
821 146 161

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;
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Profolio
plants4friendz
Excursionist
21 0 7

Thank you so much for your help!