Change Background Color Of Slideshow Section

Technical Q&A
1

Hello there! I am using minimal theme (goodmonkeyco.com). I was wondering if there is a way to change the background of this:

CaptureW.PNG
CaptureW.PNG1572Ă—682 117 KB

To appear like this:

Capture.PNG
Capture.PNG1572Ă—682 121 KB

I had success of only making the surrounding box of the slideshow colored, but not the entire section. Any support is very appreciated!!

2

@GoodMonkeyCo

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.template-index .main-content .shopify-section, .shopify-section:first-child .index-section {
    max-width: 1340px;
    margin: 0px auto;
}
div#shopify-section-slider {
    max-width: 100%;
    background: #000;
}
3

@KetanKumar

Thanks for the help! As you can see, this again doesn’t create the desired solution rather only fills in the inside of the slideshow, which is not what I am looking for.

Capture.PNG
Capture.PNG1587Ă—705 111 KB

4

@GoodMonkeyCo

yes, please add this code

.template-index .main-content {max-width:100%}
.template-index .main-content .shopify-section, .shopify-section:first-child .index-section {
    max-width: 1340px;
    margin: 0px auto;
}

#shopify-section-slider {
    max-width: 100%;
    background: #000;
}
5

@Ketan That’s almost it, but there with that code there is still a little vertical margin present, while I want it to extend seamlessly.

For example, the header extends without stopping, while you can see there is still a margin for the slider. Any last help?

Capture.PNG
Capture.PNG1586Ă—527 315 KB

6

@GoodMonkeyCo

yes this final code please update this

.template-index .main-content {max-width:100%}
.template-index .main-content .shopify-section {
    max-width: 1340px;
    margin: 0px auto;
}

#shopify-section-slider {
    max-width: 100%;
    background: #000;
}