Archived topic
Image in single post to be full width?
7 replies · Started by nomadiceman on July 11, 2021
Hi guys,
I’ve looked at the customiser options and can’t seem to figure this out.
How can I make the featured image be the full width in mobile. Meaning the image goes right from the edge to the other edge on mobile screen?
But I need it to be as it is on desktop and tablet too.
Any tips is appreciated
Hi there,
Just to confirm, you only want the image to be full width on mobile?
So remove the space here?
https://www.screencast.com/t/gnjvKR2YOIiJ
Let me know :)
yes please. exactly
Hi there,
Can you try adding this CSS?
@media(max-width:768px){
.featured-image.page-header-image-single {
margin-left: calc(-100vw / 2 + 100% / 2);
margin-right: calc(-100vw / 2 + 100% / 2);
max-width: 100vw;
width: auto;
}
.featured-image.page-header-image-single img {
width: 100%;
}
}Expected result - https://share.getcloudapp.com/nOuP2QwY
Ive just unchecked the "display padding around images" in Layout > Blog
It seems to work.
how did I miss that ?
Ive just unchecked the “display padding around images” in Layout > Blog
It seems to work.
how did I miss that ?
Does it fully sort out what you require? Let us know. :D
I think so. I’m shocked I missed it
I’ll keep that code incase it doesn’t sort it
Thanks again
Nice one. Let us know if you need further help.
No problem. :D
