[Warehouse theme] Adding Box Behind Slideshow Text To Increase Readability?

Store Design
1

Hello everyone,

I’m looking to add a box behind the text on a slideshow in the Warehouse theme to increase readability. Here’s an image illustrating how the box could be positioned.

Oliverraahauge_1-1630749404934.png
Oliverraahauge_1-1630749404934.png375×452 179 KB

How do I edit this? I’ve played a bit in theme.css using the following code:

.collection-grid-item__title.h3 {
    position: relative;
    top: 12px;
    background: #bdaa0a;
}

Any guidance is appreciated :folded_hands:

2

hii, @Oliverraahauge
Kindly share your store URL.
Thank You.

3

Of course https://thefurnitureemporium.ie/

4

hii, @Oliverraahauge
Paste this code on top of the theme.scss file.

h2.slideshow__title.heading.h1 {
    background-color: white !important;
}

Thank You.

1 Like
5

Thanks a bunch :folded_hands:

6

@Oliverraahauge
Welcome.

7

I will try to add opacity to the box too

8

I see this fills the entire screen. How can I adjust the width so its not exceeding the text length that much?

Desktop

Oliverraahauge_0-1630751150695.png
Oliverraahauge_0-1630751150695.png1207×403 439 KB

Mobile

Oliverraahauge_1-1630751182197.png
Oliverraahauge_1-1630751182197.png442×460 179 KB

You’re amazing :folded_hands:

9

hii @Oliverraahauge
Paste this code on top of the theme.scss file.

@media only screen and (min-width: 992px) {
h2.slideshow__title.heading.h1 {
    max-width: 38% !important;
    margin-left: 31% !important;
}
}

Thank You.

1 Like
10

This works!! Thanks! :slightly_smiling_face: