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;
}

I can help you with that. First figure out what mobile image you want in the background and upload it to your Media (WordPress Admin). Once you do that, copy the link and then I’ll show you how to add it to your CSS so it kicks in during responsive mode.

For the “smushing” issue. It appears there is something interfering with the theme. By default if you’re using the one-half class then the theme is supposed to automatically have that div/class adjust to the browser at 100% width. It looks like there’s something keeping the width fixed at 48% instead of 100%. That’s why it shows up narrow.

I can’t tell exactly where it’s coming from since you’re using a CSS minifier. If you turn that off then I could possibly see. If that doesn’t reveal the source, then I could definitely find out where it’s coming from if you could create a temporary login.

Both of these issues should be an easy fix.

Example: Here’s how it currently looks in mobile view – https://i.imgur.com/5zy1z12.png

And here’s how it supposed to look – https://i.imgur.com/Cfuuv1Y.png

The 2nd image is how the theme is supposed to look, which is why I think there is something external (possibly a plugin, or custom code) causing the issue.

Ok, logging in now…

What information is missing?

The only thing I did was comment out the CSS on the Customizer page and that was about it. Everything was working once I made that adjustment (on Friday). I haven’t added or removed anything anywhere else.

Did you make any adjustments?

Also remember you’ll need to make those adjustments to the background images I mentioned earlier. Especially the section with the blue background (if you don’t want the black background color to show) on mobile.

Ok I just reloaded the page and now I see the section you’re talking about. I don’t remember seeing that before.

It looks like you have the column class issue fixed now.

Now you just need to replace some of those images so the content shows up better (If you still want to).

You can still replace the section with the blue background image with a Background Color instead. That would make sure it stays one consistent color when viewed on mobile devices (instead of the black background that shows up near the bottom). You could even override the background image by adding something like this to your custom CSS (or in your Responsive section) –

.front-page-4 {
    background: #3775A3;
}

@Roy77 Do you have a link to your site?