How to get the text at the right position?

[BudwigUser]

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

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;
  }
}

[websensepro]

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:

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

[DaisyVo · Accepted solution]

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: 

I hope this helps

Best,

Daisy

[BudwigUser]

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

[BudwigUser]

Do you have a solution. That would be awesome. 

[websensepro]

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!