How to get the text at the right position?

Store Design
,

Topic summary

A user is trying to position text and a button within a green box on their Shopify store banner. They shared their existing CSS code along with a screenshot showing the current layout issue.

Initial Solutions Provided:

  • Two different CSS approaches were offered to align the content using flexbox properties
  • Both solutions involved adding code to the theme’s CSS file or Custom CSS section
  • The fixes used display: flex, flex-direction: column, and alignment properties to reposition elements

Follow-up Issue:
After implementing one solution, the user reported that text positioning broke on mobile/phone view. They requested help fixing this responsive design problem.

Mobile Fix:
A media query solution was provided targeting screens under 768px width, adjusting font size and padding specifically for mobile devices.

Status: The discussion appears resolved with the mobile-responsive CSS fix, though the user hasn’t confirmed the final outcome.

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

How can I get the text + the button in the green box.

Screenshot 2025-01-09 113222.png
Screenshot 2025-01-09 113222.png1145×659 334 KB

This is my code:

.banner .banner__media:nth-child(1) {
  border-radius: 20px 20px 0px 0px !important;
  width: 80%;
  height: 500px;
  margin: auto;
}
.content-container {
  border-radius: 0px 0px 20px 20px !important;
}
@media screen and (min-width: 1024px) {
  div.banner.banner--content-align-center {
    flex-direction: column !important;
  }
  .banner__media.media {
    position: relative !important;
  }
}
.banner__box.content-container {
  width: 80%;
  max-width: 100%;
  height: 200px;
  text-position: !important;
}
@media screen and (max-width: 750px) {
  .banner,
  slideshow-component {
    display: none;
  }
}
2

Hi @BudwigUser

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
.banner__box.content-container.content-container--full-width-mobile.color-scheme-f10bcb13-0ebd-430d-9e6e-eedc23eaed9a.gradient {
    display: flex !important;
    flex-direction: column !important;
    align-items: end !important;
    padding-right: 50px !important;
}

Result:

websensepro_0-1736420061550.png
websensepro_0-1736420061550.png1351×574 212 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

Hi @BudwigUser

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.banner__box.content-container {
    display: flex !important;
    flex-direction: column;
    padding: 0 !important;
    justify-content: center !important;
}

Here is the result:

image_720.png
image_720.png719×245 95 KB

I hope this helps

Best,

Daisy

1 Like
4

Thank you, it worked but now the text in the Phone version moved a bit. Can you fix this?

5

Do you have a solution. That would be awesome.

6

Hi @BudwigUser

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
h2.banner__heading.inline-richtext.h1 {
    font-size: 28px !important;
}
.banner__box.content-container.content-container--full-width-mobile.color-scheme-f10bcb13-0ebd-430d-9e6e-eedc23eaed9a.gradient {
    padding: 20px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!