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
37 1 9

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
836 149 169

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
836 149 169

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
836 149 169

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
37 1 9

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
836 149 169

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
37 1 9

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
836 149 169

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
37 1 9

Thank you so much for your help!