How to move header text up on mobile only?

Store Design

Topic summary

A user needed to adjust header text positioning specifically for mobile devices, as shown in an attached screenshot.

Solution Provided:

  • Add custom CSS to the end of the styles.css file
  • The CSS uses a media query targeting screens up to 480px width
  • Adjusts the top property (set to 38%) for the mobile overlay text caption
  • The percentage value can be modified as needed

Status: Resolved for the original poster, who confirmed the solution worked.

Follow-up Question:
Another user without a styles.css file asked where else this code could be placed, but this remains unanswered.

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

Hello, I was wondering if it’s possible to move the header text up only on mobile? Pic Below

Screenshot_20220104-124716_Chrome.jpg
Screenshot_20220104-124716_Chrome.jpg1080×2220 229 KB

Website: www.ecogarby.com

Password: ttt

2

@Acid2Rain - please add this css to the very end of styles.css file and check, adjust number as per need

@media only screen and (max-width: 480px){
.image-with-text-overlay .mobile-text--over-media .caption {top: 38%;}
}
1 Like
3

@suyash1 You’re awesome!! Thank you so much!

4

Hi, I ran into the same issues. I don’t have a styles.css file. Can I put this code elsewhere? Thank you!!!