Solved

Remove Background color for Slider on Dawn theme

consultancy_hrv
Tourist
3 0 1

I'm working on a website where portrait style images are used instead of landscape in my slider so it looks a bit wonky. Gray areas fill in that empty space behind (the slider is set to grid instead of full width layout). How do I change this gray to white or transparent some how?

 

I do have this custom css in it already to be able to see the whole portrait image without it taking up the entire screen.

 

.media > img {
object-fit: contain;
}

Screenshot 2024-03-15 221332.png

Accepted Solution (1)
magenest
Shopify Partner
151 8 15

This is an accepted solution.

Hi @consultancy_hrv,
Can you try to add this CSS

Go to Online store > theme > customize > setting > custom css

.slideshow__media.banner__media.media {
    background: none;
}

Hope this helps, and if you need further help, don't hesitate to comment and let us know

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers

View solution in original post

Replies 4 (4)

magenest
Shopify Partner
151 8 15

Hi, it is quite hard to imagine what you are describing. Can you give us your website (and password if any)?

And we will try to come back with a solution to your problem.

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers
consultancy_hrv
Tourist
3 0 1

Yup. At the bottom of this page is the slideshow. https://woodyshoodies.ca/pages/the-story

The gray space behind is super frustrating

magenest
Shopify Partner
151 8 15

This is an accepted solution.

Hi @consultancy_hrv,
Can you try to add this CSS

Go to Online store > theme > customize > setting > custom css

.slideshow__media.banner__media.media {
    background: none;
}

Hope this helps, and if you need further help, don't hesitate to comment and let us know

Magenest - One-stop Digital Solution Provider
- Don’t forget to drop a thumbs-up and Mark it as a Solution if you find our response useful
- Elevate your online business with our Shopify experts and professional designers
consultancy_hrv
Tourist
3 0 1

Thank you! I applied it as custom css to the whole site rather than just the component and it worked 🙂