A user seeks help rounding the corners of section containers and image/video banners on their Shopify store (arabiancreed.com/pages/about). They want sections to have a maximum width of 1200px with rounded edges.
Solutions Provided:
For general sections: Add custom CSS code to the theme.liquid file (above the </body> tag) to apply border-radius styling to specific section classes.
For video banners specifically: Navigate to Shopify > Theme > Customize > Custom CSS and add border-radius styling to the .m-video__bg class (suggested value: 10px).
Both solutions include code snippets and visual examples. The discussion appears resolved with working CSS implementations, though the user initially noted video banners remained unchanged after the first solution.
I am trying to round the containers of sections and Image/video banners on my website. Please I need help
Link: https://arabiancreed.com/pages/about
Password: App123!!
I want the max width for the image with text section to have a max width of 1200 and also be rounded
This is what I am trying to achieve.
Hey @Ked
I’m unable to locate the place to enter the password in the password page, can you disable the password for some time so I can help you out?
Best Regards,
Moeed
Its disabled now, Thank you
Hey @Ked
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
The media/video banner is still the same
Hi @Ked
You can follow the instruction here to round your video banner:
Go to Shopify > Theme > Customize > open Custom CSS
Copy and paste this code to the section > Save
.m-video__bg {
border-radius: 10px;
}
.m-hero--has-overlay:before {
background-color: transparent;
opacity: var(--opacity-image-overlay);
}
Here is the result:
