Jump to content

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

Go to solution Solved by humxahafeex,

Recommended Posts

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
  • Solution

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

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.