My website does not display correctly in mobile browsers

This question already has an answer here:

How to make my website mobile and tablet compatible? [closed] 3 answers

I apologize if this is just another duplicate question, but I'm having trouble phrasing the issue I'm having, and none of the searches I've conducted in Google or here have come up fruitful.

I am practicing a CSS overhaul of my website, and debugging the layout in multiple browsers as I go. Right now, I've gotten to a place where things look great in desktop browsers, but awful in mobile browsers. I forgot to clarify this in my original post (which got it marked as a duplicate), but at present, we are not designing this site to have a truly responsive layout, due to the amount of content we have to serve, and the illustrative nature of the layout. It is a web-browser game.

http://danapull.com/literising/ is where I'm starting to play around with code.

When the above is viewed on an iPad or iPhone in both mobile Chrome/Safari, the top right corner of the site is viewable, but it's impossible to zoom or scroll to see anything else.

I've been reading up, and many things are pointing to:

Negative margins are not playing nice in the mobile browsers
I am not utilizing any code to support mobile browser viewports.

I'm very new to CSS, and appreciate any assistance.

Below are the CSS and HTML:

html {
    background: #000;
}

body {
}

#bg-top {
    background: url('images/bg_01.jpg') no-repeat center top;
    height: 973px;
    top: 0;
    position: absolute;
    width: 100%;
    z-index: 0;
    display: block;

}

#bg-mid {
    background: url('images/bg_02.jpg') repeat-y center top;
    height: 2000px;
    top: 973px;
    position: absolute;
    width: 100%;
    z-index: 0;
    display: block;
}

#logo-container {
    background: url('images/logo.png');
    width: 140px;
    height: 100px;
    position: absolute;
    left: 50%;
    margin-left: -610px;
    top: 20px;
}

#user-module {
    width: 300px;
    height: 120px;
    position: absolute;
    left: 50%;
    margin-left: 310px;
    top: 12px;
    background-color: rgba(255, 249, 230, 0.7);
    border-radius: 20px;
    box-shadow: 0 1px 5px #000;
}

#logo-container:hover {
    background-position: 0 -100px;
}

#scroll-container-top {
    background: url('images/scroll_top.png') no-repeat;
    width: 1280px;
    height: 633px;
    position: relative;
    left: 50%;
    margin-left: -640px;
    top: 140px;
    display: block;
}

#scroll-container-mid {
    background: url('images/scroll_mid.png') repeat-y;
    width: 1280px;
    height: 2000px;
    position: absolute;
    left: 50%;
    margin-left: -640px;
    top: 772px;
    display: block;
}

HTML:

<!DOCTYPE html>

<html>

    <head>
        <title>Lite Rising</title>
        <link rel="stylesheet" type="text/css" href="css-reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

            <div id="bg-top"></div>
            <div id="bg-mid"></div>

            <a href="#"><div id="logo-container"></div></a>

            <div id="user-module"></div>

            <div id="scroll-container-top"></div>
            <div id="scroll-container-mid"></div>

    </body>

</html>

I wouldn't say that this question is a duplicate of How to make website mobile and tablet compatible- the proper way forward for that will be going ahead with media queries and making it responsive.

The quick fix and as easy explanation will be that you are using position: absolute css property at the very base main container.

Position: Absolute takes your content- in this case your DIVs out of the general website blocks and they virtually do not take any space. If you can give them some ground with adding at least position: relative to your container and defining a width instead of 100%. You will be able to notice that when you resize your browser size you do not see any scrollbars.

You should also consider removing:

    <meta name="viewport" content="width=device-width, initial-scale=1">

because width=device-width will show your website as zoomed in instead of showing your full page which your user should be able to zoom to their preferred content block.

I hope it helped.

Related Articles