Different text locations on mobile and on PC

Store Design
,
1

Hello, I’m using the Savor theme and I want to have different text locations on mobile and on PC for a specific text box. I want the text on PC to remain the same as it is and on mobile to be in the middle of the screen and move up.
I’ll add how I want it look on PC in the replies because I can only post one image

This is how I want it to be on mobile
This is how I want it to be on mobile418×862 48.5 KB

2

And this is how I want it to stay on PC
And this is how I want it to stay on PC1185×682 42.2 KB

3

Hi @Ehrlich931

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hello, thanks for the reply, here’s the URL yoyo-prints-2.myshopify.com

5

Hi there,

I understand what you’re trying to achieve — keeping the desktop layout intact while repositioning the text box specifically for mobile inside the Savor theme. That’s a common responsiveness challenge, and it’s usually solvable without affecting your PC layout.

Here’s a structured way to approach it:

:one: Confirm Section Structure

First, check whether the text box sits inside a banner/hero section. Many themes wrap text in a container like .banner__content or similar. Identifying the exact class in the theme editor (Inspect tool) is key.

:two: Apply Mobile-Only CSS

You can adjust positioning using a media query so desktop remains unchanged:

@media screen and (max-width: 749px) {
  .your-text-class {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}

This centers the text horizontally and moves it upward only on mobile.

:three: Check Parent Positioning

Ensure the parent container has position: relative; — otherwise the text may not align correctly.

:four: Test Spacing & Overlap

After repositioning, preview on multiple screen sizes to confirm it doesn’t overlap buttons or imagery.

If you’d like, I can highlight a few more store-specific insights that may help resolve these issues.

6

Hello, thanks for the reply but I don’t understand anything from what you said, I’m a beginner and I don’t understand how to even apply mobile only CSS

7

Hello, thanks for the reply. Apparently I didn’t remove the password :smiling_face_with_tear:
Here’s the link with no password yoyo-prints-2.myshopify.com

8

Hi @Ehrlich931

Okay, in this customization we will need to create separate fields for mobile and separate fields for desktop.

9

Hi, how do we do that?

10

Hello, how to that? I’m a beginner

11

Hi @Ehrlich931

Okay, please send me the collaborator code and I will implement it in your theme.

12

code is 2488
thanks :slight_smile:

13

Hi @Ehrlich931

I’ve sent you the request — please accept it.

14

Hi @devcoders
I accepted your request

15

could you also do the same for the button below the text please? And let me know when you finished, thanks so much that helps a ton!