Get rid of white space between Image banner and Featured collection

Solved

Get rid of white space between Image banner and Featured collection

crobinsonrauch
Visitor
3 0 0

Capture.JPG

Hello , I would like to remove all the white space boarders in the circled places. I also want the 3 featured products to stretch to reach the image banner width.  I want the images to bleed into each other, to replicate like this website design:

Capture 1.JPG

Can you give me step by step instructions on how to do this? I am using DAWN theme is there a better/different theme I should be using? 

 

Thank you!

 

 

Accepted Solution (1)
AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @crobinsonrauch ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

#shopify-section-template--14441365995556__featured_collection .collection {
    padding: 0 !important;
}

#shopify-section-template--14441365995556__featured_collection .grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
    margin: 0 !important;
}

@media (min-width: 990px) {
#shopify-section-template--14441365995556__featured_collection .grid .grid__item {
    width: calc(100% / 3) !important;
    max-width: calc(100% / 3) !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Replies 6 (6)

Bluesoft_Design
Shopify Partner
83 16 15

Hi @crobinsonrauch ,

 

Can you share a link to your site?

David A
Lead Project Manager
Bluesoft Design
Tel: (732) 443-0538 | Email: info@bluesoftdesign.com | Website: www.bluesoftdesign.com
Bluesoft_Design
Shopify Partner
83 16 15

The site is password protected. Can you share the password to enter the site?

David A
Lead Project Manager
Bluesoft Design
Tel: (732) 443-0538 | Email: info@bluesoftdesign.com | Website: www.bluesoftdesign.com
crobinsonrauch
Visitor
3 0 0

JStrongwater123

Bluesoft_Design
Shopify Partner
83 16 15

From what I can see, it looks like that 2nd grid of 3 images is no longer there anymore.

 

Screenshot 2022-03-30 162527.png

David A
Lead Project Manager
Bluesoft Design
Tel: (732) 443-0538 | Email: info@bluesoftdesign.com | Website: www.bluesoftdesign.com
AvadaCommerce
Shopify Partner
3879 839 973

This is an accepted solution.

Hi @crobinsonrauch ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:

#shopify-section-template--14441365995556__featured_collection .collection {
    padding: 0 !important;
}

#shopify-section-template--14441365995556__featured_collection .grid {
    column-gap: 0 !important;
    row-gap: 0 !important;
    margin: 0 !important;
}

@media (min-width: 990px) {
#shopify-section-template--14441365995556__featured_collection .grid .grid__item {
    width: calc(100% / 3) !important;
    max-width: calc(100% / 3) !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned