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

Blog Posts: CSS to get Images to Stretch across Whole Screen on Mobile?

Question

Posted (edited)

Site URL: https://www.recaprabbithole.com/recap/dr-anthony-fauci

I want everything except text, to stretch across the whole screen on all of the actual blog posts themselves. on Mobile only. 

See attached image:

 

This worked:

 

 

/* make image fullwidth */
.blog-item-wrapper article.entry {
    padding-left: 0;
    padding-right: 0;
}
/* make spacing between text blocks - both side */
.blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) {
    padding-left: 8vw;
    padding-right: 8vw;
}
html, body {
  overflow: hidden;
}

Edited by RecapRabbitHole

Share this post


Link to post

13 answers to this question

Recommended Posts

  • 0

I see it works here. Did you insert my code or..?

@media screen and (max-width:767px) {
/* make image fullwidth */
.blog-item-wrapper article.entry {
    padding-left: 0;
    padding-right: 0;
}
/* make spacing between text blocks - both side */
.blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) {
    padding-left: 6vw;
    padding-right: 6vw;
}
}

image.thumb.png.1d7594be64ebee334c30bacbc75a0b44.pngimage.thumb.png.1d7594be64ebee334c30bacbc75a0b44.png


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

Remove above code & use this

@media screen and (max-width:767px) {
.blog-item-wrapper article.entry {
    padding-left: 0;
    padding-right: 0;
}
.blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) {
    padding-left: 6vw;
    padding-right: 6vw;
}

}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

 

34 minutes ago, tuanphan said:

Remove above code & use this


@media screen and (max-width:767px) {
.blog-item-wrapper article.entry {
    padding-left: 0;
    padding-right: 0;
}
.blog-item-wrapper .sqs-layout>.row>.col>div:not(.image-block) {
    padding-left: 6vw;
    padding-right: 6vw;
}

}

 

Still no luck. It makes the page on the mobile have black space on the right hand-side. 

Something is wrong with the scale and width. 

IMG_8561.PNG

Share this post


Link to post
  • 0

Hi,

 

Try this: 

@media(max-width: 767px) {
    .blog-item-wrapper article.entry {
        padding-left: 0;
        padding-right: 0;
    }

    .blog-item-wrapper article.entry .html-block.sqs-block-html {
        padding-left: 40px;
        padding-right: 40px;
    }
}

 

Share this post


Link to post
  • 0
Posted (edited)
    .blog-item-wrapper article.entry {
        padding-left: 0;
        padding-right: 0;
    }

    .blog-item-wrapper article.entry .html-block.sqs-block-html {
        padding-left: 40px;
        padding-right: 40px;
    }
}

 

No luck. It adds space to the right hand side of the page, such that you can scroll horizontally. See attached screenshot. 

IMG_8562.PNG

Edited by RecapRabbitHole

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...