How do I make my blog post cover images stretch the full width on Mobile?

Site URL: https://www.recaprabbithole.com/

I would like the blog cover images (only) to stretch the full width of the phone such that there is no white space to the right of the blog pictures.

See attached illustration. 

What CSS should I use?

------------------------------------------------------------

@paul2009 - I believe you are one of the best on here, I have followed your solutions on other CSS posts, and wonder if you might be able to help me. Thanks!

Hi , Here you go , Simply Juts paste the code below to Design >Custom Css and save 🙂 I will do the Job.

@media screen and (max-width: 767px){
      .blog-basic-grid--container>div>.image-wrapper>img{
  width:100%;
  }
  .tweak-blog-basic-grid-width-full .blog-basic-grid {
      padding:0px !important;
  }
      .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--text {
      padding: 0.4em !important;
      box-sizing: border-box;

  }
}

Don't forget to mark it as solved if it works , You can mark it solve by clikcing  up arrow on left top corner of this answer.

@humxahafeex

Thanks that works fine for the pictures, but it makes the text fall off the page to the right. Check the screenshot:

Here is your tweaked code that I am using:

@media screen and (max-width: 767px){
      .blog-basic-grid--container>div>.image-wrapper>img{
  width:100%;
  }
  .tweak-blog-basic-grid-width-full .blog-basic-grid {
      padding:0px !important;
  }
      .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--text {
      padding: 1em !important; // to create white space around the text. But the text falls off the page to the right...

  }
}

42 minutes ago, RecapRabbitHole said:

@humxahafeex

 

Thanks that works fine for the pictures, but it makes the text fall off the page to the right. Check the screenshot:

Here is your tweaked code that I am using:

 

@media screen and (max-width: 767px){
      .blog-basic-grid--container>div>.image-wrapper>img{
  width:100%;
  }
  .tweak-blog-basic-grid-width-full .blog-basic-grid {
      padding:0px !important;
  }
      .tweak-blog-basic-grid-text-alignment-left .blog-basic-grid .blog-basic-grid--text {
      padding: 1em !important; // to create white space around the text. But the text falls off the page to the right...

  }
}

 

 

I updated the Code Please have a look and try that Hope it will solve the Issue 🙂 

@humxahafeex Spot on. Excellent work!