How can I round corners on the Venture Theme?

[hangdaniberia]

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

[hangdaniberia · Accepted solution]

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?

[Huptech-Web]

Hi @hangdaniberia 
Can you share the store URL.

[hangdaniberia]

Hello,

thanks for your fast reply, the URL 

https://hangdaniberia.com/

Best regards

[Huptech-Web]

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.

[hangdaniberia]

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.

[Huptech-Web]

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

[hangdaniberia · Accepted solution]

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?

[Huptech-Web]

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.

[hangdaniberia]

Hello,

I published the theme, so you should be able to see it now like in the screenshots.

https://hangdaniberia.com/

[Huptech-Web]

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;
}

[hangdaniberia]

Hello Rishihuptech,

Thabk you so much,

Where I have to paste the code?

Thank you in advance

[Huptech-Web]

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/...

[hangdaniberia]

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

[Huptech-Web]

Hi @hangdaniberia 
Can you share the screen shot where do you want the spacings?

[hangdaniberia]

Hello @Huptech-Web ,

between the sections like in the photo in the red marked area

[Huptech-Web]

Hi @hangdaniberia 

To add gap between both card add below CSS where you added the previous css

[data-section-type] a.featured-card {
    margin: 0px 10px;
}

[hangdaniberia]

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?

[Huptech-Web]

Hi @hangdaniberia 

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;
}

[hangdaniberia]

Hello @Huptech-Web 

the page looks like this if I enter the code.

[Huptech-Web · Accepted solution]

Hi @hangdaniberia 
Okay, There are simple changes on the CSS code

If you check the code Here  you will find that there are border-radius: 100px 0 0 100px; in the selector nth-child(2n+1) you have to replace it with border-radius: 50px; Same goes to nth-child(2n) you have to replace it with border-radius: 50px; in theme.scss.css

For the new section you have added on the page add below CSS

.shopify-section .grid .grid__item a div {
    border-radius: 50px;
}

.section-block.section-block--padding {
    border-radius: 50px;
}

[hangdaniberia]

Hello @Huptech-Web 

perfect, this looks nice.

Thanks for the support, now it looks like I want to.

Best regards

[ThePrimeWeb]

Hey @hangdaniberia,

Please share the store link, and if possible a mockup of what you want to achieve. 
Thanks!