Archived topic
HERO PAGE IMAGE RESPONSIVE
3 replies · Started by Juan on January 26, 2020
Hi, I have a problem with my site's home page, on desktop it looks good but on mobile the image doesn't fit. I tried what you recommend in other similar questions in the support forum but I can't find the solution.
Hi there,
Two solutions for this:
- Change the background position on mobile with this CSS:
@media (max-width: 768px) {
.page-hero.phalt {
background-position: center center;
}
}
- Use a mobile specific background image for this header element:
@media (max-width: 768px) {
.page-hero.phalt {
background-image: url(https://MOBILE-IMAGE-URL)
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Thanks, it's solved, I was going crazy.
No problem :)