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

Store Design
, , ,
1

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

Screenshot 2024-04-01 at 10.34.07.png
Screenshot 2024-04-01 at 10.34.07.png2828×1340 497 KB

2

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

3

Hi again,

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

4

Hi again,

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

5

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

Thank you!!! :+1:

1 Like
7

Thank you for response.

8

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”?

Screenshot 2024-04-01 at 11.17.55.png
Screenshot 2024-04-01 at 11.17.55.png3024×1486 662 KB

9

Yes. Sure, Please wait.

10

Hi @Smultronetshop Please add code here:

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

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!

Screenshot 2024-04-01 at 11.31.26.png
Screenshot 2024-04-01 at 11.31.26.png858×1398 164 KB

12

Thank you!!!

13

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

14

@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;
  }
}
1 Like
15

Thank you !!!

16

You are the best!

17

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. :slightly_smiling_face:

Screenshot 2024-04-01 at 11.47.07.png
Screenshot 2024-04-01 at 11.47.07.png756×536 475 KB

18

Deskop Text Button Center

Add This Css in Base.css File

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

In mobile version

Add This css In your Base.css File

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

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