Fixing image and text layout in Supply theme: How to do it?

Store Design

Topic summary

A user is experiencing a layout issue in the Supply theme where text appears on top of images on a page. Two developers have offered CSS solutions:

Solution 1 (SideNode):

  • Navigate to: Online Store → Theme → Edit code → Assets → theme.scss.css
  • Add CSS code targeting .featured-box--inner with height: 100%!important

Solution 2 (INA_MSWEB):

  • Add CSS code targeting #food-storage-amp-reusables.vertical-middle with top: inherit !important
  • Insert at the bottom of the theme.scss.css file

Both solutions involve adding custom CSS to the theme files. The discussion remains open as the original poster has not confirmed which solution resolved the issue or whether the problem persists.

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

There is text showing on top pf my images on a page. How do I fix it? (In Supply theme)

LynnieHHHY_0-1688358820265.png
LynnieHHHY_0-1688358820265.png1920×1080 300 KB

2

Hi @LynnieHHHY
Its SideNode! We will be happy to help you today.

You can try this code: it will be helpful to you

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

.featured-box--inner {
    height: 100%!important;
}

you can see the change .

SideNode_0-1688363632414.png
SideNode_0-1688363632414.png1338×314 150 KB

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

Let me know if need further assistance
Regards,
SideNode

1 Like
3

Hi @LynnieHHHY

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the theme.scss.css file:

#food-storage-amp-reusables .vertical-middle {top: inherit !important;}

Regards,

San