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.
- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- 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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025