Upfront responsive layout overlaps

On this site http://***design****.com/broadlands/ there are sections where elements overlapping in responsive (tablet) mode. See attached screenshot. It's a custom theme but editing it in Upfront editor "responsive mode" didn't let us set the layout properly.

  • Predrag Dubajic

    Hey Adam,

    Hope you're doing well :slight_smile:

    I had a look at your site and the issue here is that you have max-height set to the region above footer but because of that the content can't fit inside when on smaller screens, and thus go over the footer.

    If you go to edit the region that contains "Welcome to Broadlands Automotive" and check the CSS for it you will see that it has this code that's causing these issues:

    .upfront-region-container-bg {
        max-height:1450px;
    }

    This is what I'm referring to:

    I didn't remove that code because I'm not sure why it was placed in there in first place so I didn't want to mess up something on your site.

    What you can try is to wrap that code in media query so it's applied only on screen width above 1080 pixels since that's when the issue starts happening, something like this should do the trick:

    @media (min-width: 1080px) {
    	.upfront-region-container-bg {
    	    max-height:1450px;
    	}
    }

    Let us know how it goes :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.