Advice on how I can make my website more mobile friendly?

[paulmcburney9]

I tried using my own website on my mobile device, and the experience is not the best, however I don’t know where I can start or what I can do to make it better. The map on my website is just too compact and the text takes too much of the screen. Any advice and code snippets that will help me? I have included a screenshot of my website if you do not wish to visit.

My Website that needs assistance: https://asteroidcollision.herokuapp.com/!Screen Shot 2020-02-08 at 7.15.10 PM|294x500

[John_Betong]

Hi @paulmcburney9 and a warm welcome to the forum.

I think the problem with mobile view is the Hamburger menu is not working correctly. The menu shows regardless whereas it should only show on wide screens.

Try the Free W3.org validation tool

also Google’s Mobile Friendly Test

[TechnoBear]

I would also suggest that you change the layout for smaller screens, so the text appears above the map, and both take the full width of the screen.

[PaulOB]

@TechnoBear

so the text appears above the map, and both take the full width of the screen.

Yes something like this to get you started.

@media screen and (max-width:762px){
    /* note !important is needed to over-ride inline styles */
    html,body{width:auto;height:auto;}
    #container,#second,#first{
        width:auto!important;
        height:auto!important;
        margin:0 0 1rem!important;
        float:none;
    }
    #first{
        position:relative;
        padding:100% 0 0;
    }
    #first iframe{
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
    }
}

Add that css after your original CSS and play around with it until it suits.

You should then see something like this:

[paulmcburney9]

This is extremely helpful, thank you. I will try to do this