Archived topic
Header Element responsiveness
5 replies · Started by Raul on March 10, 2021
Hi
I'm trying to use the Header Element to design the home-page as you can see on my website - a large background image, full width. I have a problem with the image on mobile. I tried to crop it in various ways but the image does not look ok on mobiles. I didn't find any way to resize it for mobiles.
Do you have any suggestion, please?
You could give this CSS a try, but the main 2 objects are too far apart, it's difficult to have a good look on mobile.
Add this CSS, then adjust the padding top to 25% and padding bottom to 10%for mobile in the header element. Adjust the numbers to find the best fit.
@media (max-width: 768px){
.page-hero {
min-height: unset;
background-position: 39%;
}
}Thank you but it doesn't do anything. Are you sure that it's ".page-hero"? I tested with 'display:none' and it shows...
Is any way to resize the background for mobile, like "width:100%"? I don't mind if it shrinks on mobiles as I will cut the image to look ok.
I don't see the code has been added to your site, please disable your cache plugin and clear cache when we are trying to help :)
https://www.screencast.com/t/8ZTCC6f6me
Yes, it's working now. It is okay for me. I have also edited the picture to get the 2 'objects' closer together :)
Thank you very much!
You are welcome :)
