How to remove gutter on image with text when using overlap text

Technical Q&A
1

Hello , I’m hoping to get some help removing a gutter down the right hand side of a ‘image with text’ when using the overlay text in the Blockshop OS 2.0 theme.

I have used google inspect and when the css display type is changed from flex to -webkit-box the image stretches the full length of the page as I want but then the overlay text is pushed behind the image.

I have tried setting z-index for both the picture and the text but this doesn’t help and I’ve also tried resizing the images to the recommended image with text as per discussion group.

On mobile the site looks fine.

Thanks for your patience

2

Hi i’ve solved the issue in google inspect tools…

To make the pictures full width:

#shopify-section-template–15267937648854__1634998702e467ab46 > div > div > div{

Display: -webkit-box

}

To position the overlap text:

#shopify-section-template–15267937648854__1634998702e467ab46 > div > div > div > div.featured-content—text{

  1. position: absolute;
  2. right: 0;
  3. bottom: 50%;

}

So to insert this CSS into the liquid file , how would I go about this, should I place it in the style section or should i use liquid??? Any help would be greatly appreciated.. Thanks