Hello together,
im trying to round the corners of the photos and different sections on my page but y could not find anything that helps me. It seems to be very easy on other theme but in Venture theme I could not find this option.
Could you please help me??
Thanks in advance
Hi @hangdaniberia
Can you share the store URL.
Hey @hangdaniberia ,
Please share the store link, and if possible a mockup of what you want to achieve.
Thanks!
Hi @ThePrimeWeb
can you share screen shot or section name with URL’s where you want the images with rounded corners, Because different shopify theme have different theme options and may be this could be fixed with CSS Code.
The page looks like in the first Photo but I would like to have it like in the second Photo.
If I can do this for the whole page it would be perfect.
Hi @hangdaniberia
Place below CSS code to theme.scss.css file,
div#shopify-section-image-content .section-block, div#shopify-section-image-content svg, div#shopify-section-image-content img {
border-radius: 15px;
}
As I didn’t found that specific images you shared as screenshot but i managed to create the css code for current sections on home page. check screenshot: https://prnt.sc/M2CmG9c8YfNc
Hello,
perfect this looks nice, but it just applies to one section of the landing page, I would like to have it on the whole page, could this be?
Hi @hangdaniberia
Can you share the preview URL of the store which you are showing on the screenshot & where you added the sections, As i mentiond before i didn’t find the sections you mentioned on the screenshots. So without that i’m not able to help you.
Hello,
I published the theme, so you should be able to see it now like in the screenshots.
Hi @hangdaniberia
Here is the new CSS code for other sections
div[data-section-type] .grid > .grid__item:nth-child(2n+1) .featured-card {border-radius: 100px 0 0 100px;}
div[data-section-type] .grid > .grid__item:last-child .featured-card {border-radius: 100px;}
div[data-section-type] .grid > .grid__item:nth-child(2n) .featured-card {border-radius: 0 100px 100px 0 !important;}
div[data-section-type] .grid .grid__item .featured-card img {border-radius: 100px;}
.template-collection .main-content .grid > .grid__item .product-card, .template-collection .main-content .grid > .grid__item .product-card .product-card__info {
border-radius: 0 0 20px 20px;
}
.template-collection .main-content .grid > .grid__item .product-card img {
border-radius: 20px;
}
Hello Rishihuptech,
Thabk you so much,
Where I have to paste the code?
Thank you in advance
Hi @hangdaniberia
You can paste the code in theme.scss.css as you have pasted the previous code here: https://community.shopify.com/c/shopify-design/round-corners-on-venture-theme/m-p/2402230/highlight/true#M632247
Hi @Huptech-Web
perfect, this looks awesome. This is what I need.
Just the last question, can you also help to put a space between each collection?
Thanks in advance
Hi @hangdaniberia
Can you share the screen shot where do you want the spacings?
To add gap between both card add below CSS where you added the previous css
[data-section-type] a.featured-card {
margin: 0px 10px;
}
Hi @Huptech-Web
perfect this looks great, could you send me also the code to round the corners y send you in the photo attached?
Update the previous here CSS with below
div[data-section-type] .grid > .grid__item:nth-child(2n+1) .featured-card {border-radius: 50px;}
div[data-section-type] .grid > .grid__item:last-child .featured-card {border-radius: 100px;}
div[data-section-type] .grid > .grid__item:nth-child(2n) .featured-card {border-radius: 50px; !important;}
div[data-section-type] .grid .grid__item .featured-card img {border-radius: 50px;}
div[data-section-type] .grid > .grid__item:nth-child(odd) .featured-card {border-radius: 50px; !important;}
.template-collection .main-content .grid > .grid__item .product-card, .template-collection .main-content .grid > .grid__item .product-card .product-card__info {
border-radius: 0 0 20px 20px;
}
.template-collection .main-content .grid > .grid__item .product-card img {
border-radius: 20px;
}
