How to move text on a banner

Store Design
, ,

Topic summary

A user seeks help repositioning banner text to the right side of an image and left-aligning it on their Shopify store page.

Solution Provided:

  • Custom CSS code targeting specific banner sections
  • Adjusts banner box width to 60% with transparent background
  • Uses flexbox to align content to the right
  • Includes mobile-responsive styling for screens under 749px
  • Code should be added to the theme’s CSS file (base.css, style.css, or theme.css)

Current Status:
The discussion remains open - the original poster implemented the suggested CSS but reports the result doesn’t match the expected outcome shown in the helper’s screenshots. The visual discrepancy suggests further troubleshooting or code adjustments may be needed.

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

Hi,

I would like to move my banner text to the right, just next to the picture (https://quatreausoir.fr/pages/histoire). Then justify the text to the left. I tried multiple codes but nothing works.

I’m desperate :sweat_smile:

Can somebody help me please ?

1 Like
2

Hi @HT23

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:
section#shopify-section-template--23161487393033__image_banner_XPKRJw .banner__box.content-container {
    width: 60%;
    background: transparent;
}

section#shopify-section-template--23161487393033__image_banner_XPKRJw .banner__content.banner__content--middle-center {
    justify-content: flex-end;
}

@media screen and (max-width: 749px) {
section#shopify-section-template--23161487393033__image_banner_XPKRJw .banner__content.banner__content--middle-center {
    position: absolute;
    right: 0;
    top: 50%;
    bottom: 30%;
}
}

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

3

Omg thank you !!

But i don’t really have the same result :

HT23_0-1736357326974.png
HT23_0-1736357326974.png2826×1204 192 KB