I cant get the mobile viewport to behave and scale properly

I need someone to view the source on my page and please tell me why the mobile version keeps opening up big, only needing to be scaled down after manually. I need it to open at the correct size and stay at that size. Please view the source on the following link:


Note: i feel i've tried nearly every meta viewport version there is all with no luck. I feel the problem may be deeper but i cant identify it. Please help me figure this out so i can move on with my life.


Looks like your #Container style isn't using percentages on your 400px media breakpoint. Also the font size is 1.5em

Your #Container wrapping div has a set width of 1000px, no matter what the viewport is. Plus I don't see any media queries being used?

Try adding media queries so it reduces in width as the viewport scales down:

@media (max-width: 991px) {
    #Container {
        width: 720px;

Add another for smaller viewports, perhaps so the #Container spans the entire width of a viewport that's <= 767px:

@media (max-width: 767px) {
    #Container {
        width: 100%;

You can add and tailor as many as you like... Here's a useful guide: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Need Your Help

Getting Wordpress To Work

php mysql wordpress apache

I am trying to get an Old Wordpress site up and running.