Archived topic
Elements - Page hero - Custom image not responsive
3 replies · Started by Jorge on February 23, 2019
I work with Elements. I make a hero page.
I use custom image as background and it's not responsive when I look at it on small screens.
How can I make the custom image look complete on small screens?
Thank you,
Jorge
Hi there,
You will need to use custom CSS like this:
@media (max-width: 768px) {
.page-id-xx .page-hero {
background-image: url(http://MOBILE-BACKGROUND-IMAGE-HERE);
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Make sure to get the actual page ID and replace the xx in .page-id-xx above.
Let me know if this helps :)
I apologize, but I've tried your instructions and I still see a huge image on cell phones, the background is not responsive.
If you need to access and see in the dashboard, please let me know.
Thank you
Jorge
Hi there,
the simplest way is to use % padding only on the top ( or bottom ) of the page hero.
The % needs to match the image aspect ratio, your images have a ratio of around 31% that is the height divided by the width.
So try removing your padding, and adding 31% to just the top padding. They will then remain responsive.
