What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

plants4friendz
Excursionist
43 1 10

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
943 172 198

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
My work

View solution in original post

Abdosamer
Shopify Partner
943 172 198

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
My work

View solution in original post

Replies 6 (6)

Abdosamer
Shopify Partner
943 172 198

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
My work
plants4friendz
Excursionist
43 1 10

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
943 172 198

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
My work
plants4friendz
Excursionist
43 1 10

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
943 172 198

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
My work
plants4friendz
Excursionist
43 1 10

Thank you so much for your help!