How do I make my site Mobile friendly?

Hi Natalie

Thanks for reaching out.

We sort of covered these challenges the last time we spoke. The unique way in which you’ve customised Vantage puts us very close to a custom development situation trying to get it ready for mobile. For a quick comparison, check out the Vantage demo vs your site on mobile: http://demo.siteorigin.com/vantage/.

I started this process off with a Custom CSS snippet here: Thread: Custom Menu to right in header-. That’ll drop everything but your logo for mobile. That’s a start for the header.

For the home page content below the header I’d recommend removing the additional Page Builder row you have or any blank Page Builder rows/columns. The problem with that technique is that those rows/columns will stack on mobile. You can rather add the following to Appearance > Custom CSS to add the extra bit of padding above the footer you’re looking for:

/* Home */

.home #main {
padding-bottom: 50px;
}

Adjust the padding as required. If you require this snippet to be site wide and not just for the home page, let me know.

The Custom CSS provided in our first thread should provide a solution for the header which is the main challenge that I can see.