Archived topic
Page Hero not resizing properly
3 replies · Started by Dave on March 12, 2021
I am having an issue with the page hero on my homepage.
The issue is that the BG does not size dynamically on different devices.
The main issue is on tablet and smaller desktop screens. I have implemented a different bg image for mobile and that seems to be working.
I have attached a screen recording so you can see what I mean.
There has to be a way to have it resize properly as I have seen it on another site I included in the private information.
Any help would be much appreciated.
cheers,
Dave
Hi there,
for your Tablet CSS you correct the background-position:
@media (max-width: 1200px) and (min-width: 768px) {
.gb-container.tablet-hero {
background-image: url(tablet-image-url-obscured);
background-position: 40% 50%;
}
}For mobile devices - it looks like you just need a little more height/width to the image that you don't mind being cropped off on smaller devices - if i try reducing its size for the small-medium device size eg.just below 768px then there will be white space around the image showing.
So, do I put the url of the image that I m using for the desktop in where it says: tablet-image-url-obscured?
Is it possible to use just one image for desktop, tablet and mobile?
Regarding the mobile image, are you referring to the mobile specific image?
Cheers,
Dave
I assume you added that CSS? If so its whatever image you had in their originally - you simply need to add the backgroud-position property to your CSS.
Re Mobile Image - yes
