Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi guys! How to change button position for mobile version only?
https://yiwqh6-vk.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
<style>
@media screen and (max-width: 749px) {
.slideshow__text-wrapper {
align-items: end!important;
}
.banner__buttons .button:after {
box-shadow:0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgb(255 255 255), 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background))!important;
}
}
</style>
Please replace the whole given code with above code.
Thank you
Can you please explain me by screenshot? Then we will able to help you.
I would like to move down the button abit more for mobile view. Could you help me to change the box "shop now" outline into white too please. Your help very much appreciated.
You can add the below code in theme.liquid above </body>.
<style>
@media screen and (max-width: 749px) {
.slideshow__text-wrapper {
align-items: end!important;
}
.banner__buttons .button {
color: #000!important;
background: #fff!important;
}
}
</style>
Screenshot:
I hope solution will be useful for you. If it's works then please like the solution and accept it.
Thank you
Thank you! But could you help me do only the letter and outline white. No fill please. Thanks in advance.
This is an accepted solution.
<style>
@media screen and (max-width: 749px) {
.slideshow__text-wrapper {
align-items: end!important;
}
.banner__buttons .button:after {
box-shadow:0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgb(255 255 255), 0 0 0 var(--buttons-border-width) rgba(var(--color-button), var(--alpha-button-background))!important;
}
}
</style>
Please replace the whole given code with above code.
Thank you
You're a genius! Thank you!
Welcome always for help.
Thank you