I have been struggling on positioning the button and discription for my main banner on Dawn Theme. I am very happy with where the button and discription is on desktop, but switching to mobile, there positions go crazy, I could really use some help with this, thank you in advance for the support.
Here is my Website Link: https://printpals.store
On desktop Its where I want it but on mobile…
Not so great.
If I could have the buttons positions similar to how it is on desktop that would be so amazing.
Hi @PrintPals
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the css file:
@media screen and (max-width: 749px) {
.banner__buttons {top: 0 !important;padding: 18px 14px !important; min-height: 20px !important;}
}
Regards,
San
Shoot that did not seem to work. I tried adding to my base.css, coustom.css, and main image banner.css and I did not see any changes
Hello @PrintPals
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 749px){
.banner__buttons {
top: 0 !important;
bottom: 0 !important;
padding: 5px 10px !important;
}
}
This was super Helpful thank you very very much, any way the buttons and text could be moved any lower?
Hello @PrintPals
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.
@media screen and (max-width: 749px){
.banner__box>*:first-child {
margin-top: 10% !important;
}
}
I tried removing the old code and only using that, did not work
and I tried using that combined with the last code you sent and also did not work.
Thank you for the efforts I really Appriciate you
