How can I reposition the text on my image banner?

Store Design
, , ,

Topic summary

Repositioning the text and button on the Home page image banner in a Shopify store. A proposed solution uses CSS (Cascading Style Sheets) to move the banner content upward on desktop screens.

Latest update: A helper provided step-by-step instructions to edit the theme’s CSS file via Online Store → Themes → Actions → Edit code → Assets (base.css/style.css/theme.css) and add a media query (applies when screen width ≥ 750px):

  • .banner__content.banner__content–middle-center: align-items: flex-start; padding-top: 0px;
  • .banner–desktop-transparent .banner__box: padding-top: 10px;
    This aligns the banner content to the top and adjusts spacing for transparent desktop banners.

A screenshot was included to illustrate the intended positioning, but the CSS snippet is central to the solution.

Outcome/status: A practical fix was proposed; no confirmation yet from the original poster, so resolution is pending implementation/feedback.

Summarized with AI on January 2. AI used: gpt-5.
2

Hi @Brilant

Is this enough?

Made4uoRibe_0-1710954633132.png
Made4uoRibe_0-1710954633132.png1345×709 181 KB

If it is check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (min-width: 750px){
.banner__content.banner__content--middle-center {
    align-items: flex-start;
    padding-top: 0px;
}
    .banner--desktop-transparent .banner__box {
        padding-top: 10px
    }
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!