Issue with background image sizing on all screens larger than 17.5in

Site URL: https://www.pushinc.agency

Hey everyone,

I am running into an issue with my site responsiveness for all desktop screens larger than 17.5in display. I have background images on each section and on the "desktop view" and "mobile view" they fit perfect. On my 15in laptop screen it looks great, and on my larger 17in screen it also looks great, but when I go to any screen size larger (ie. 21.5in) the sections get cut off at the top which hides some elements of text that are in the image. 

I noticed that when I zoom to 125% it displays as expected, but at 100% zoom on these large screen sizes it cuts off. 

ps. I know background image section stack is not traditional for websites - it was because I am converting a PDF into a 'e-brochure' page and was required to keep the sections exactly as was provided in the PDF. 

Long story short - the image height / width is not responding properly for any screen sizes larger than 17in display. 

Any suggestions / ideas on how I can fix this would be much appreciated. 

4 hours ago, StephanPUSH said:

I know background image section stack is not traditional for websites - it was because I am converting a PDF into a 'e-brochure' page and was required to keep the sections exactly as was provided in the PDF. 

That's an understandable requirement, but background images will always crop on different screen sizes.

You can use CSS to prevent that and fix the section ratio, try this in Custom CSS, it won't work perfectly because it is too general a rule to add, but if you like the result it can be targeted a bit more specificially:

.page-section {
    height: 56.25vw !important;
}

Hey Ziggy, 

I appreciate your quick response. This code worked - but also made the footer the full screen size. I would be looking to just effect the sections containing a background image. 

Is there a way to tell the site that all background images should always be 100% width no matter what the screen size? The height of each section is not as important if everything does not fit, but I am hoping that I can find a solution that ensures the width is always 100%, to allow for no cropping between sections. 

Thanks! 

17 hours ago, StephanPUSH said:

Hey Ziggy, 

I appreciate your quick response. This code worked - but also made the footer the full screen size. I would be looking to just effect the sections containing a background image. 

Is there a way to tell the site that all background images should always be 100% width no matter what the screen size? The height of each section is not as important if everything does not fit, but I am hoping that I can find a solution that ensures the width is always 100%, to allow for no cropping between sections. 

Thanks! 

Try this instead

#page .page-section {
    height: 56.25vw !important;
}