Shopify themes, liquid, logos, and UX
Hi,
I'm attempting to shift the button slightly lower, but this adjustment disrupts the layout, causing the button to touch the edge of the image, which is not the desired outcome. Additionally, the image banner appears zoomed in mobile view.
I want something like this: the "Shop Collections" button to be positioned right in the center with some space at the bottom.
I have two questions:
1. How can I move the button to the center without it touching the edges of the banner and without covering my text, especially in mobile view?
2. Is there a way to make the entire banner clickable without relying on the button?
Thank you for your help.
Please add this code at the bottom of your base.css file in Online store > Themes > Edit code
.banner__buttons .button,
.banner__buttons,
.banner__box,
.banner__content {
width: 100%!important;
height: 100%!important;
max-width: 100%!important;
padding: 0!important;
position: absolute!important;
top: 0px;
left: 0px;
opacity: 0;
bottom: 0px;
right: 0px;
margin: 0px !important;
}
- 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.
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