- This topic has 5 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hello, the featured image width in my site’s posts displays bit larger than the screen so you can scroll to the right. I’ve checked my CSS but didn’t find anything wrong.
You can check it here: https://pcgamia.com/noticias/anuncio-remake-the-witcher/
Customer Support
Hi there,
you have this CSS on your site:
@media (max-width: 768px) { .featured-image.page-header-image-single img { max-width: unset; width: 120vw; margin-left: -15vw; margin-right: -15vw; } }I can’t see where it is coming from due to the cache/optimizations on the site.
Do you know where that is from ?I added it myself on the theme’s child CSS so the image borders are cropped on mobile, but it doesn’t seem to be the cause as if I remove it the problem persists.
I’ve removed it now to help checking it.
Ok:
In Customizer > Layout > Blog –> Featured Images you have unchecked:
Display padding around images
This gets the padding value from the Customizer > Layout > Container which is set to 30px.
And uses negative margins to remove that padding.
But in your child theme styles you have this CSS:@media (max-width: 768px) { .one-container .site-content, .separate-containers .inside-article { padding: 10px; } }Which reduces the padding to only 10px. So you get overflow.
Check this option
Display padding around imagesto stop that.
And remove the CSS you have for resizing the image.Then add this CSS:
.featured-image.page-header-image-single { margin-top: -20px !important; margin-left: -30px; margin-right: -30px; } @media(max-width: 768px){ .featured-image.page-header-image-single { margin-top: -30px !important margin-left: -10px; margin-right: -10px; } }Thank you! That solved the problem.
I’ve kept the CSS for resizing as I have not found a better way to make the image not so horizontal on mobile. But it looks fine with the steps you provided.
Awesome support as always. 🙂
Glad to be of help 🙂
- You must be logged in to reply to this topic.
