How do i move the text in the home page image banner

Store Design
,

Topic summary

A user seeks help repositioning text within their homepage image banner, which is currently centered but needs to be moved higher to avoid blocking too much of the image.

Solutions Provided:

  • PageFly-Victor suggests adding custom CSS code before the </body> tag in the theme.liquid file
  • oscprofessional offers a more specific CSS solution targeting the banner box positioning through base.css file:
    • Initial code addresses mobile view by setting absolute positioning with top and bottom values at 0
    • Follow-up code for desktop adjusts banner content padding to 2rem

Outcome:

The original poster confirms oscprofessional’s mobile solution works successfully. They then inquire about separate code for desktop positioning, receiving an additional CSS snippet for desktop adjustments.

Additional Activity:

Another user (babystore123) reports experiencing a similar issue and requests direct assistance. A third user (nini12) asks for clarification about mobile versus desktop versions.

The discussion remains active with the desktop solution provided but not yet confirmed as tested.

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

Hi

Is there anyone that can help me with the coding to move the text in the home page image banner

It is currently selected as centralised but i wish to move it up further to the top so it will not block my image too much.

Any help is much appreciated.

Thanks

94A1B093-D546-4450-A6C9-D4E6CB38C721.jpeg
94A1B093-D546-4450-A6C9-D4E6CB38C721.jpeg1242×1736 201 KB

2

Hi @FFPNF ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

PageFlyVictor_0-1681541062628.png
PageFlyVictor_0-1681541062628.png438×481 179 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hello @FFPNF

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

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

@media screen and (max-width: 749px){
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    position: absolute;
    top: 0;
    bottom: 0;
}
}
1 Like
4

@oscprofessional thank you so much. it works

5

Hello @FFPNF

If my solution is helpful to you please like my post

6

Hi Victor

This works for mobile.

If i wish to change it on desktop, is there another code?

7

Hello @FFPNF

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

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

.banner__content {
    padding: 2rem !important;
}
1 Like
8

Hi! I’m having a similar issue. I would be so thankful for your help! Could you send me a message?

9

Do you have one for mobile version?