Dawn Change Image Texte Box Border Radius

Store Design
1

Hello,

I would like to modify the code of the Dawn theme of Shopify and round the Images with text block, like this :

Likidie_0-1649245536982.png
Likidie_0-1649245536982.png1257×586 304 KB

How can I do that please?

Thanks in advance.

Have a nice day,

2 Likes
2

@Likidie
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

1 Like
3

@Likidie Can you please send me store url?

4

https://laptopsleevetest.myshopify.com/

password : thabut

5

https://laptopsleevetest.myshopify.com/

Password : thabut

6

@Likidie

.image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 25px !important;
}
.image-with-text__text-item.grid__item {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

add this code in the bottom of the component-image-with-text.css

1 Like
7

@Likidie

Add the following CSS code to your assets/ component-image-with-text.css bottom of the file.

.image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 25px !important;
}
.image-with-text__text-item.grid__item {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

Thanks!

8

Hi @Likidie ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-image-with-text.css->paste below code at the bottom of the file:
.image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .image-with-text__content:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-radius: 25px !important;
}
.image-with-text__text-item.grid__item {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.