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 

[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 </body> on theme.liquid
<style type="text/css">
@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;
  }
</style>

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

[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

[AlexDaSilva]

This worked perfectly, thank you so much!