Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


RecapRabbitHole

Question

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!

 

Edited by RecapRabbitHole
Link to comment

4 answers to this question

Recommended Posts

  • 1

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.

Edited by humxahafeex
Fix added for text
Link to comment
  • 0

@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...

  }
}

 

 

Screen Shot 2020-05-10 at 5.01.14 PM.png

Link to comment
  • 0
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...

  }
}

 

 

Screen Shot 2020-05-10 at 5.01.14 PM.png

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

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...