How can I add a box behind text for better visibility?

Shopify Discussion
1

The text which is over my images in the slide show bar and collections sections of my website is extremely hard to read.

Is there a way to add a box behind the text to make it stand out like button on the image overlay,

Thanks in advance!!

2

Hi omascosmetics,

Can you share the URL, So that i can resolve your issue.

3

yes offcourse

https://omascosmetics.com/

i want the texts under the collection list to be in a box on the image like the one on the header.

thank you

4

Hi,

Can you share the screenshot? exactly where you to modification.

5

Screen Shot 2020-09-11 at 12.35.23 PM.png
Screen Shot 2020-09-11 at 12.35.23 PM.png1426×727 268 KB

6

Hi,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

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

Hi, I wanted the title to be in the middle of the image like the header

8

Screen Shot 2020-09-12 at 12.28.35 PM.png
Screen Shot 2020-09-12 at 12.28.35 PM.png1085×716 968 KB

9

I wanted the title to be in the middle of the picture

10

Hi,

Add this css at the place of previous css
Online Store->Theme->Edit code->Assets->theme.scss.liquid

.collection-grid-item__title.h3 {
    opacity: 0.7;
    background: #baab48;
}

hope this will work for you if further any changes pls let me know.

1 Like
11

Thank you! i think i prefer the previous one. thank you for all your help :wink:

12

@omascosmetics

If the solution is helpful to you then give a like and accept it…