How to make container of text on image smaller?

Store Design
, , ,

Topic summary

A user seeks to reduce the size of a white text container overlaying an image on their Shopify store’s landing page. The text box displaying “Natural Vitality Hair Serum” appears too large and blocks part of the product image.

Solution Provided:

  • Navigate to Online Store → Edit Code → theme.liquid file
  • Insert custom CSS code above the </body> tag to resize the container

Outcome:
The user confirmed the CSS solution successfully resolved the issue. The discussion is marked as resolved with the provided code snippet working as intended.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
1

Hello,

How do I make the container size of the text box overlayed on a image smaller?

I want to make the white “Natural Vitalitiy Hair Serum” box smaller so it doesn’t block the picture.

Thanks in advance.

Screen Shot 2024-09-25 at 1.42.40 PM.png
Screen Shot 2024-09-25 at 1.42.40 PM.png2192×1024 318 KB

1 Like
2

Hey @vickgill

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hi @vickgill

Would you mind sharing your store URL? Thanks!

4

Thanks

5

beautynut.com is my website

Thanks

6

Hey @vickgill

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1727287158065.png
Moeed_0-1727287158065.png1681×833 310 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
7

Thanks Moeed!

8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.