Archived topic
Getting rid of the empty space in a contained page hero image in mobile
5 replies · Started by Joey on July 3, 2020
I have an image on my page hero (https://simipress.com/home/) that is 762px x 1108, centered and set as "full page," like the cover of a book. As it is too wide for the mobile, I contained it with this code to get the whole image on the phone:
.blog .page-hero {
background-size: contain;
}Is there a way to move the padding of the page hero up proportionally after 762px to get rid of the empty black space at the bottom of the image?
Here is what I am trying to do:
I know I can uncheck "full page" in the page hero, and then set the padding to 28%/28% on desktop and about 71%/71% on mobile, but then on tablet mode the page hero will no longer be full page. Is there a way to do this without that empty black space and keeping full page on desktop and mobile? Thanks in advance.
Hi there,
you can unset the Full Page at 500px ( where the empty space appears ) using this CSS:
@media(max-width: 500px) {
.blog .page-hero {
min-height: unset;
}
}Oh, so all GeneratePress is doing with full-page page heros is setting a minimum height. Thank you, it worked.
One last question, if you have time. If I want to put a margin around all posts, I know I can do this:
@media (max-width: 768px) {
.blog, .archive {
margin-left: 10px;
margin-right: 10px;
}
}But how can I exclude the main navigation, footer bar, and page hero image?
Try:
@media (max-width: 768px) {
.blog #page, .archive #page {
margin-left: 10px;
margin-right: 10px;
}
}That worked awesome, thank you very much.
You're welcome
