Shopify themes, liquid, logos, and UX
Hello, I need help adjusting this banner.
It looks good on desktop, but I'm not particularly fond of its look on mobile.
I'd like the grey area with buttons tom be centred just like on desktop, vs having the image banner completely on top of the button area. Here's two pics:
thank you!
Solved! Go to the solution
This is an accepted solution.
Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Also, we can do this design if you like to, let me know.
HI @lorypez
Try this one.
@media only screen and (max-width: 749px){
.banner__content.banner__content--middle-center.page-width {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
}
.banner__box.content-container {
padding: 2rem !important;
}
}
"Your Feedback Matters! Please mark the solution and give likes to posts that helped you.
Your appreciation fuels our motivation to assist you better! "
thanks mate! definitely helpful. hope the website looks good overall! 🙂
I'll ask you another question, then I won't "harass" you anymore haha.
how can I make the grey, button area more centred? it appears to be too wide.
thanks again
No worries, I'm happy to help if the issue is simple and straightforward. When I checked the banner, it seems like the width of the buttons has been reduced. Do you like to align in center?
If it is, check this one.
@media only screen and (max-width: 749px){
.banner__buttons.banner__buttons--multiple {
width: 100%;
justify-content: center;
}
}
And Save.
Result:
Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!
thanks for the help, it still looks too wide, but its not a big deal.
I'll put it on "left centred", even if that way the text will be a little more to the left. thanks mate
This is an accepted solution.
Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Also, we can do this design if you like to, let me know.
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025