How to move text up in Savor theme banner, but only for mobile?

Store Design
, , , ,
1

Hi everyone! I am attempting to use the Savor theme. Looks great on desktop, but terrible on mobile. Is there any way to move the text up on just mobile?

Screenshot 2026-07-09 212507
Screenshot 2026-07-09 212507492Ă—792 91 KB

2

Yes, it’s possible. In most cases, you’ll need to add a small CSS media query that only applies to mobile screens. If you’re using the Savor theme, sharing your store URL or a screenshot of the section would help others suggest the exact CSS needed to move the text up without affecting the desktop layout.

3

You’re on the Savor theme. The Hero section’s “Position” setting applies to both desktop and mobile, so on phones the centered text lands over the busy part of the banner image. Fix with mobile-only CSS in assets/base.css. add it in the every end in this file:

@media screen and (max-width: 749px) {
  .hero__content-wrapper.mobile-column {
    justify-content: flex-start;
    padding-top: 24px;
  }
}

swap flex-start for center (default) or flex-end (bottom) if you want a different mobile position later - same rule, just change that one value.

Note: it will apply on the hero banner of all pages not just the home page .

Tested it on my store with your theme:

17836619480755661441869108059439
17836619480755661441869108059439924Ă—1999 154 KB

4

Hey @graphics123456

Can you share the preview URL of your Savor theme so I can have a look and provide you a code accordingly?

Best,
Moeed

5

Hi @graphics123456 Can You Please Share the URL of your Website

6

Hi @graphics123456

Okay, please send me your store URL. I’ll review it and provide you with a proper update.

7

Hi @graphics123456 ,

Please share your store URL and password, if it’s password-protected.

Thank you!

8

@graphics123456 can you please share your website link? and password to view page, if any

9

Hello @graphics123456

Since your banner looks good on desktop and you only want to move the text slightly higher on mobile, you can try adding the following CSS code.

Please go to Online Store → Themes → Edit code → Assets → base.css and paste the code at the very bottom of the file:

@media screen and (max-width: 749px) {
  .hero__content-wrapper.mobile-column {
    justify-content: flex-start !important;
    padding-top: 60px !important;
  }
}

You can increase or decrease the padding-top value until the text sits where you want it on mobile.