Home page looks terrible on mobile

[444media]

I am having issues with almost every section of my home page (uscapaa.com) displaying properly on mobile. I know that I can create hide during breakpoint sections and adjust the section to display properly for each screen size, but I am wondering if there is an easier way to make the adjustments on the page overall? Or maybe some of my settings are making the sections display poorly on mobile?

Not sure if you can see how maybe some more “global” settings would help it display properly…or if I just need to manually add a duplicate section then adjust that section for mobile and hide it on larger screen sizes and repeat that for every element and section.

Thanks for your help!

-Chris

[ruenel]

Hello Chris,

Thanks for writing in!

Please go to X > Theme Options > Layout and Design and set your “Site Max Width” to 1200 pixels only. I can also see that you are just loading the big images in each of the sections. Please remove the 65 pixel left padding of the images and then in the column settings, align it to the center to make sure that your images will always be at the center.

Hope this helps.

[444media]

Great! That did help. But due to the size and number of menu items I have by making it any smaller than 1350 (at least on my big screen) it pushes the main menu down the screen. Can I adjust just the width of the header perhaps in the Header settings?

I am still having an issue though with the footer. I created a global block for the footer, and have just duplicated the entire row and made one row for mobile and tablets and hid the higher screen size breakpoints. Then tried to adjust the settings for the 3 columns to get it to look spaced correctly, but something is not working. I tried making the L and R margins set to auto, but that didn’t help.

Thanks for your additional help!

[tristup]

Hi Chris,

It seems that the padding of these sections are the reason behind your issue and you need to adjust the padding for the smaller screens. You can add the following code into the Element CSS of specific columns to reduce the padding.

@media  (max-width: 480px) 
{
    $el.x-col
    {
        padding: 0px 0px 0px 0px;
    }
}

Please remember that the above code will work if copied as it is and don’t conflict with any existing style.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We really do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks