Shopify themes, liquid, logos, and UX
Hi everyone
I created 2 image banners so I can show different images on desktop or mobile, The Button block on image banner is working good in desktop vision but how do i create button in mobile vision and i also want the button is below the the girl feet. Thank you so much
This is my store https://7dd6bf-4c.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
Hello @tabny
Go to online store ---------> themes --------------> actions ------> edit code-------> assets------>section-image-banner.css ------> line number 55
search this code.
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}
}
and replace with this code
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
position: absolute !important;
top: 53.5rem !important;
}
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hey @tabny
It seems like you don't have any button currently on the mobile banner image, can you first add the button then I can help you adjust it's position.
Best Regards,
Moeed
hello Moeed
Sorry i just add it and i want to it like the image shows
Hey @tabny
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (max-width: 767px) {
a.button.button--primary {
opacity: 1 !important;
}
.banner__content {
position: absolute !important;
top: 535px !important;
}
}
</style>
RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
@tabny thanks for posting here.
please use this concept:
@media screen and (max-width: 749px){
.banner__content {
position: absolute;
bottom: 0;
}
}
if it helps to solve the issue so please mark it as solved.
Hi @tabny
Please uncheck the option to make the button display into image of your mobile image.
- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Hello @tabny
Go to online store ---------> themes --------------> actions ------> edit code-------> assets------>section-image-banner.css ------> line number 55
search this code.
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
order: 2;
}
}
and replace with this code
@media screen and (max-width: 749px) {
.banner--mobile-bottom:not(.banner--stacked) .banner__content {
position: absolute !important;
top: 53.5rem !important;
}
}
and the result will be
If this was helpful, hit the like button and mark the job as completed.
Thanks
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024