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

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;
}

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.blog-item-wrapper .image-block {
    padding-left: 0;
    padding-right: 0;
}
}

.blog-item-wrapper .image-block {
    padding-left: 0;
    padding-right: 0;
}

Thanks, but this still leaves some white space around the images. 

How can I make the images use the whole screen width?

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;
}

}

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. 

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;
    }
}

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

Can you check url? Above link doesnt exist https://www.recaprabbithole.com/recap/kim-jong-un-mabtx

10 hours ago, tuanphan said:

Can you check url? Above link doesnt exist https://www.recaprabbithole.com/recap/kim-jong-un-mabtx

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

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;
}
}

I put in your code. Open on mobile you will see the issue. @tuanphan

Your code adds a new issue: horizontal scrolling... 

I see fine here. Which phone did you use?

Horizontal scroll bar... look at this screenshot:

Iphone 11

add to Home > Design > Custom CSS

html, body {overflow: hidden;}