Solved

Debut theme rounded images with text

GG9
Explorer
56 1 11

Hi,

how can I make rounded images within the section image with text? The image below should have rounded corners. 

 

round.PNG

Accepted Solution (1)
made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @GG9 ,

We need the image. Try this

#FeatureRowImage-16292906183f293a23 {

border-radius: 1rem; 

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

View solution in original post

Replies 14 (14)

GG9
Explorer
56 1 11

Adding the following code solved it:

.feature-row__image-wrapper {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

 

But does anyone here know how to add CSS code to just ONE specific section in shopify? 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @GG9 


Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

GG9
Explorer
56 1 11

How can I make ONE section only use rounded images? How can I specify that in theme.css? Thanks for your help.

made4Uo
Shopify Partner
3804 713 1124

Which section was it? I am trying to find the section to provide the exact code

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

You have to copy the section ID. You can get the section ID by inspecting the page to open the dev tools

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
GG9
Explorer
56 1 11

@made4Uo Thanks, the section ID is shopify-section-16292906183f293a23

made4Uo
Shopify Partner
3804 713 1124

Hi, 

I dont know if this works but try it. I dont know if the section has a wrapper. Change the border radius on how much you want it to be rounded

#shopify-section-16292906183f293a23 > img {

border-radius: 1rem;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
GG9
Explorer
56 1 11

@made4Uo It didn't work, but it seems like it has a wrapper. It tells me FeatureRowImageWrapper-16292906183f293a23 in developer console

made4Uo
Shopify Partner
3804 713 1124

Try applying the radius to the wrapper. It is hard to help you without seeing the element. Can you pin point where is this image in your website? 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
made4Uo
Shopify Partner
3804 713 1124

Actually, I think I know where. Here is the code, try this

#FeatureRowImageWrapper-16292906183f293a23 {

border-radius: 1rem;

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
GG9
Explorer
56 1 11

@made4Uo It didn't work. I did some highlighting for you to find the exact image and section.section.PNG

made4Uo
Shopify Partner
3804 713 1124

This is an accepted solution.

Hi @GG9 ,

We need the image. Try this

#FeatureRowImage-16292906183f293a23 {

border-radius: 1rem; 

}

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
GG9
Explorer
56 1 11

This seems to work! Thanks a lot @made4Uo 

made4Uo
Shopify Partner
3804 713 1124

Good to know. Can you provide click the solution so this issue will seen as resolve?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!