Reply To: Mobile sizing & alignment issues

The background image’s height isn’t long enough to cover the content when your site is in mobile view. When a site is viewed on a mobile device the content’s height is much longer due to the lack of width. Some users upload a 2nd background image that shows up when responsive mode kicks in. Usually this type of image is more vertical.

If you don’t have a 2nd image, then you can try removing the max-height for .front-page-1 or override it by adding this –

.front-page-1 {
    max-height: auto;
}

This will make the image fit better vertically. If you want it to look different then you’ll have to upload an image that is designed specifically for a mobile device (make sure it’s long enough to cover your content).

Same thing goes for your Front Page 4 widget. The background image is wide enough but it isn’t tall enough for a mobile device with the amount of content you have showing in responsive mode.

In this case, you could either upload a larger image, or you could just add a background color for this section since its all one color.

.front-page-4 {
    background-color: #3474a4 !important;
}