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

Solved

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

Smultronetshop
Excursionist
26 0 4

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

 

Accepted Solution (1)
PageFly-Noah
Shopify Partner
1317 233 272

This is an 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;
}

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 23 (23)

PageFly-Noah
Shopify Partner
1317 233 272

 

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Smultronetshop
Excursionist
26 0 4

Hi again,

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

PageFly-Noah
Shopify Partner
1317 233 272

This is an 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;
}

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Smultronetshop
Excursionist
26 0 4

Thank you!!!!! 👍

Smultronetshop
Excursionist
26 0 4

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

PageFly-Noah
Shopify Partner
1317 233 272

Yes. Sure, Please wait.

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1317 233 272

Hi @Smultronetshop  Please add code here: 

 

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Smultronetshop
Excursionist
26 0 4

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

Smultronetshop
Excursionist
26 0 4

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

PageFly-Noah
Shopify Partner
1317 233 272

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Smultronetshop
Excursionist
26 0 4

You are the best!

Smultronetshop
Excursionist
26 0 4

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. 🙂 

Screenshot 2024-04-01 at 11.47.07.png

Raj-webdesigner
Shopify Partner
345 85 82

Deskop Text Button Center

 

Add This Css in Base.css File

 

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

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-[email protected]


Raj-webdesigner
Shopify Partner
345 85 82

 In mobile version

 

Add This css In your Base.css File

 

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

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-[email protected]


Smultronetshop
Excursionist
26 0 4

Thank you!!!

PageFly-Noah
Shopify Partner
1317 233 272

Thank you !!!!

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Noah
Shopify Partner
1317 233 272

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Smultronetshop
Excursionist
26 0 4

Perfect, thanks! 

Everything looks amazing now. Thanks. 
Only one small thing, the background colour of the button disappeared. How can I resolve that?
CheersScreenshot 2024-04-01 at 12.13.43.png

Smultronetshop
Excursionist
26 0 4

Hi again,

Managed to fix it! Thanks. 

PageFly-Noah
Shopify Partner
1317 233 272

Thank you !!!

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Raj-webdesigner
Shopify Partner
345 85 82

 

 

Are you looking for Shopify Developer then your search is over I will help you


If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link

:-

❤️Tip❤️

Contect On My Mail :-[email protected]


Smultronetshop
Excursionist
26 0 4

Hi again,

 

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

PageFly-Noah
Shopify Partner
1317 233 272

Thank you for response.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.