on this one the image banner doesn’t take up the whole page and the corners are rounded.
Topic summary
A user wants to create an image banner that doesn’t span the full page width and has rounded corners, similar to a reference image they shared.
Proposed Solution:
A community member (Sandeep81) provided CSS code to add to the base.css file, which includes:
- Setting banner width to 90% (creating side margins)
- Adding 20px border-radius for rounded corners
- Adjusting positioning and object-fit properties
- Media query targeting screens 750px and wider
Current Status:
The solution appears unsuccessful—the original poster tested the CSS code and reported it didn’t work on either desktop or mobile devices. The issue remains unresolved, with no follow-up troubleshooting provided yet.
Alternative Option:
Another participant suggested hiring a Shopify expert as a backup solution if coding fixes don’t work, noting this could be accomplished at a reasonable price.
Hey, @dylmil00
I’m confident one of our Shopify experts would be able to help provide a coding solution and add styling to round the edges of your banner. This could be accomplished at a reasonable price.
Just wanted to share this as an option in case you are unable to find a coding solution in your thread.
Hi Dylmil,
I am Sandeep and I am trying to help you.
If you will give your Store URL then it is easy to fix that.
however you can give css { border-radius:10px; } to the image.
Thanks & Regards
Sandeep
Hi Dylmil,
Paste this CSS in your base.css file.
@media screen and (min-width: 750px) {
.banner__media. Media img {
height: 100vh !important;
width: 90% !important;
object-fit: cover !important;
object-position: center top!important;
border-radius: 20px !important;
margin: 0 auto !important;
left: 5% !important;
top: 5% !important;
}
}
Thanks & Regards
Sandeep
Does this work on mobile as well? I pasted it but I’m not sure if it worked because I’m on my phone as well
It didn’t work for desktop or mobile I just checked