Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
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.
Hi again,
Thank you for your patience, and help. Here is the url: https://4c9jjjythm9ufn09-67877634316.shopifypreview.com
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.
Thank you!!!!! 👍
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"?
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.
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.
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!
(it can be placed in the middle in mobile version, doesn't have to be on the left side)
@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.
You are the best!
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. 🙂
Deskop Text Button Center
Add This Css in Base.css File
.banner__buttons {
justify-content: center;
}
.banner__text.body {
justify-content: center;
display: flex;
}
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.
Contect On My Mail :-Mail@gmail.com
In mobile version
Add This css In your Base.css File
@media screen and (max-width:767px){
.banner__content {
position: absolute !important;
bottom: 0;
}
}
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.
Contect On My Mail :-Mail@gmail.com
Thank you!!!
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.
@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.
Perfect, thanks!
Everything looks amazing now. Thanks.
Only one small thing, the background colour of the button disappeared. How can I resolve that?
Cheers
Hi again,
Managed to fix it! Thanks.
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.
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.
Contect On My Mail :-Mail@gmail.com
Hi again,
Click on "kille" in the header, then you will be available to enter that page. All the best.
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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024