How do I move the text in header image to the left?

[Smultronetshop]

Hi,

Hope you are well. How do I move the text in the image header to the left? I suppose it's some customiseation of the code. I've tried this but didn't work:

@media only screen and (min-width: 750px){ .text-center .mega-subtitle {max-width: 100% !important;} .hero__inner .text-center { text-align: left !important;} .hero__inner .hero__btn { left: unset !important; right: unset !important;} }

Preview of website: https://www.smultronetshop.se/pages/killklader-home/killklader-home-nod3kvm5

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @Smultronetshop  please send me url again, This url is not found.

Best regards,

Noah | PageFly

[Smultronetshop]

Hi again,

Thank you for your patience, and help. Here is the url: https://4c9jjjythm9ufn09-67877634316.shopifypreview.com

[PageFly-Noah · Accepted solution]

Hi @Smultronetshop  You can fix it by add code to file base.css:

@media screen and (min-width: 750px){
.banner__box {
    min-width: 0px !important;
    padding-left: 20px !important;
   }
//change color to white if you want
.banner__box h2 {
    color: white !important;
   }
}

@media screen and (min-width: 750px){
.banner__content.banner__content--middle-center {
    align-items: center !important;
    justify-content: flex-start !important;
}
}
.banner__content{
    max-width: 100% !important;
}

[Smultronetshop]

Thank you!!!!! 👍

[Smultronetshop]

Any chance you now how to push the text and button under the title to the left as well? "Upptäck våra favoriter" and "Köp nu"? 

[PageFly-Noah]

Yes. Sure, Please wait.

[PageFly-Noah]

Hi @Smultronetshop  Please add code here: 

.banner__box div{ 
  width: 100% !important;
  text-align: left !important;
}

[Smultronetshop]

thank you. Just one last question. In mobile version, the text is pushed below the image. Any chance you have a solution for it? Thanks!

[Smultronetshop]

(it can be placed in the middle in mobile version, doesn't have to be on the left side) 

[PageFly-Noah]

@Smultronetshop  yes, Please add code here: 

@media only screen and (max-width: 767px) {
  .banner__box{
     position: absolute !important;
     bottom: 0 !important;
     //if you want set content left please add code below
     text-align: start !important;
  }
}

[Smultronetshop]

You are the best!

[Smultronetshop]

Now it apperad a follow-up question about it above. How do I make the text "Upptäck våra favoriter" and the "Köp nu" button in the middle? Sorry for all these questions. 🙂 

[Raj-webdesigner]

Deskop Text Button Center

Add This Css in Base.css File

.banner__buttons {
    justify-content: center;
}
.banner__text.body {
    justify-content: center;
    display: flex;
}

[Raj-webdesigner]

 In mobile version

Add This css In your Base.css File

@media screen and (max-width:767px){
    .banner__content {
        position: absolute !important;
        bottom: 0;
    }   
}

[Smultronetshop]

Thank you!!!

[PageFly-Noah]

Thank you !!!!

[PageFly-Noah]

@Smultronetshop Hi, please change again code here to :

@media only screen and (max-width: 767px) {
  .banner__box{
     position: absolute !important;
     bottom: 0 !important;
     text-align: center !important;
  }
}

I change line " text-align: left !important;" to " text-align: start !important;

[Smultronetshop]

Perfect, thanks! 

Everything looks amazing now. Thanks. 
Only one small thing, the background colour of the button disappeared. How can I resolve that?
Cheers

[Smultronetshop]

Hi again,

Managed to fix it! Thanks. 

[PageFly-Noah]

Thank you !!!

[Smultronetshop]

Hi again,

Click on "kille" in the header, then you will be available to enter that page. All the best. 

[PageFly-Noah]

Thank you for response.