Rounded corners on image with text container

[AlexDaSilva]

Hi all! I have two “text with image” containers on my home page. On the desktop version i was able to take off the corner radius so that the corners are square and not rounded. However, on mobile view, the corners are still rounded. How do i change this? Note i have entered custom code already to stretch the container to the full width of the page. I just need to take off the rounded corners so that it looks like the container touches both sides and is full width of the page. See image for how it looks on mobile. The blue container at the top and red at the bottom.

[niraj_patel]

Hello @AlexDaSilva
Can you share store URL?

[AlexDaSilva]

Sure! Thanks for your help

www.prettylittleskin.co.za

[PageFly-Henry]

Hi @AlexDaSilva

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

body .shopify-section.section .image-with-text__media.image-with-text__media–small.gradient.color-accent-1.global-media-settings.media img,

.shopify-section.section .image-with-text__media.image-with-text__media–small.gradient.color-accent-1.global-media-settings.media,

div#ImageWithText–template–21663823888678__image_with_text_egqUmW ,

div#ImageWithText–template–21663823888678__image_with_text_kg7ynD,

.image-with-text__media.image-with-text__media–small.gradient.color-background-2.global-media-settings.media {

border-radius: unset !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[niraj_patel]

@AlexDaSilva

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .grid__item .image-with-text__media { border-top-right-radius:unset !important; border-bottom-right-radius: unset !important; border-top-left-radius:unset !important; border-bottom-left-radius: unset !important; } .image-with-text.collapse-corners:not(.image-with-text--overlap) .image-with-text__grid--reverse .grid__item .image-with-text__content { border-top-right-radius:unset !important; border-bottom-right-radius: unset !important; border-top-left-radius:unset !important; border-bottom-left-radius: unset !important; } .image-with-text.collapse-corners:not(.image-with-text--overlap) .grid__item .image-with-text__content { border-top-right-radius:unset !important; border-bottom-right-radius: unset !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[AlexDaSilva]

This worked perfectly, thank you so much!