Get rid of white space between Image banner and Featured collection

Store Design
1

Capture.JPG
Capture.JPG1840×859 147 KB

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
Capture 1.JPG2482×889 114 KB

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!

2

Hi @crobinsonrauch ,

Can you share a link to your site?

3

https://crobinson-4030.myshopify.com/

4

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

5

JStrongwater123

6

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
Screenshot 2022-03-30 162527.png3837×1895 570 KB

7

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.