How can I position text under image on Athens 2.0 collection buttons?

Store Design
,

Topic summary

A user is trying to reposition text on collection buttons in the Athens 2.0 Shopify theme, wanting the text to appear below images rather than overlaid on them.

Solutions Proposed:

  • Add CSS code to the end of the base.css file
  • Two different CSS snippets were suggested:
    • .card-overlay-media { position: initial; }
    • .card-overlay-info { bottom: 60% !important; }

Current Status:

  • The proposed solutions did not work as intended
  • After implementation, the text moved to the top of the image instead of below it
  • The text remains overlapping with the image rather than positioned underneath
  • The issue remains unresolved
Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hello does anyone know how to get the text on these collection buttons to be under the image instead of inside the image?

this is on our frontpage.

emilbrandon_0-1691740847201.png
emilbrandon_0-1691740847201.png1505×331 100 KB

https://www.remlagret.se/

2

@emilbrandon - add this css to the very end of your base.css file and check, we might need more css, but start with this

.card-overlay-media{position: initial;}
3

HI @emilbrandon

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.card-overlay-info {

bottom: 60% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

This did not work:

emilbrandon_0-1691994571068.png
emilbrandon_0-1691994571068.png1619×311 102 KB

they are on the top now instead. still mashed with the picture.

5

thank you