Mobile not showing the full width of the contents of the page

@seravy

That implies some media query rules in CSS of theme, to make it really responsive (not the case now). With stylesheet code like this:

<style type="text/css">     

    @media only screen and (max-width: 640px)
    {
	styles
    }	

    @media only screen and (max-width: 320px)
    {
        other styles
    }       

</style>

For Google Maps, it’s normal, otherwise you’ll have to drag left and right to see full map on a smartphone, which is the worst possible thing.
Size is already adjusted, but is set for 640px x 320px maximum at the moment, so it needs a little tweaking:

<iframe src="https://mapsengine.google.com/map/embed?mid=znySYhvUNAc4.kJISV0EMGX9k" width="640" height="320"></iframe>

You can adjust that to make it bigger if screen allows it, by modyfing this size, I suggest something like 1600×1200. (in Google maps widget or directly in html while keeping roughly aspect ratio). But please note embed Google Maps are very heavy in size (can easily reach 2/3 Mb for one standard map), so it will for sure slow down your website for smartphone users.

Hope it helps,

@digico Paris

Thanks for your reply.

Here’s the style.css file on my child theme:

/*
Theme Name: vantage-child
Description:
Author: Seravy
Template: vantage

(optional values you can add: Theme URI, Author URI, Version, License, License URI, Tags, Text Domain)
*/

#main {
padding: 0px;
}

<style type=”text/css”>

@media only screen and (max-width: 640px)
{
styles
}

@media only screen and (max-width: 320px)
{
other styles
}

</style>

But the table contents are still being cropped only showing the centre part. I’ve also set the Google Map size to 1600×1200 which is really good for Desktop users, but almost impossible to browse for mobile users. The map takes up the whole screen you’ll end up swiping the map not the webpage.

As for the embed Google Maps, that’s a very good suggestion. My mobile phone needs to load quite some time to load when using mobile data. But are there other methods to show store locations other than embedding maps? I’ve tried Google Maps Widget but I don’t think it can show multiple locations?

Cheers

Hey seravy,

well, tables are a real pain in the butt, when it comes to responsive design. Right now, your tables get a fixed width of 850 pixels. You can add a “max-width: 100%” to them, so they will be restricted to the maximum size of the viewport.

Take a look at this for some additional help with responsive tables:
https://css-tricks.com/responsive-data-tables/

Regarding the Google Maps, you should be really carefully with this on mobile devices. Users can easily get stuck within a map on their device, when there is no free space to move the viewport instead of the map.

Try adding something like this to the map’s iframe:

max-width: 90%;
margin-left: auto;
margin-right: auto;

This will restrict the width of the map to a maximum of 90% of the viewport’s width and then center it horizontally.