Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Remove Background color for Slider on Dawn theme

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
162 12 24

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
162 12 24

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
162 12 24

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 🙂