Text Placement Image Banner Mobile

Store Design
,

Topic summary

A user is experiencing text placement issues with image banners on mobile devices. While desktop banners display correctly, the mobile version needs text positioned higher on the image.

Proposed Solutions:
Multiple community members provided CSS code snippets to adjust mobile banner text placement. The solutions involve:

  • Accessing the theme’s CSS file (theme.css/base.css) through Online Store > Edit Code
  • Adding media queries targeting mobile viewports (max-width: 749px or 768px)
  • Modifying properties like align-items: flex-start, padding-top, or margin-bottom

Key Technical Details:
The CSS targets .banner__content and related classes, using flexbox alignment and responsive breakpoints. One responder included a visual result image showing the adjusted text placement.

Status:
The discussion remains open with no confirmation from the original poster about which solution worked. Multiple helpers requested feedback and asked the user to mark helpful responses.

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

Hey, got different Banners for mobile and desktop. On Desktop the Image Banner Text Placement is fine.

On mobile i would like to place the text higher.

Can someone please help me with a code!

Thanks!
Appreciate any help!

https://cwrur2rn2w7tqjxd-91755413843.shopifypreview.com
meachu

2

Hi @noah_essentis

If you get your Question right you want the text to be placed at top in the mobile version
Here is the CSS you can place

You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

@media(max-width:768px){
.banner__content {
    align-items: flex-start;
}
}

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

3

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
        background: transparent;
        margin-bottom: 60%;
    }
}

Thanks!

4

Hi @noah_essentis

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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 (max-width: 749px){
.banner__content {
    align-items: start !important;
}
.slideshow__text.banner__box.content-container {
    padding-top: 50px;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!