CODEWITHSUNDEEP
jqueryhtmlcssmobileresponsive-design
Dan
Dan

Reputation: 2344

CSS doesn't appear to work on mobile device

I am testing a site and it works perfectly on desktop/laptop but as soon as a mobile device is used it fails horrible. I mean the page is unrecognizable.

The example page is up and running on http://danjamespalmer.com/projects/decoathletic/index.html. All CSS and JS can be viewed from the source. Here is an example all the same:

HTML:

<!doctype html>

<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Deco Athletic || You Decide</title>

    <!-- JavaScript -->
    <script src="jquery/jq.js"></script>
    <script src="js/deco.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <!-- Stylesheets -->
    <link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">
    <link rel="stylesheet" media="screen and (min-device-width: 650px) and (max-width: 999px)"  href="css/deco_650.css">
    <link rel="stylesheet" media="screen and (max-width: 649px)" type="text/css" href="css/deco_649.css">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">


</head>
<body>

<div id="main>">
    <div id="header">
        <div id="header_data">
            <div id="logo"><a href="index.html"><img src="images/logo.png" alt="deco athletic logo" class="logo_image"></a></div>
            <div id="mobile_menu_icon"></div>
            <div id="navbar">
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">SHOP</a></li>
                    <li><a href="">BLOG</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div id="first_section">

    </div>

     <div id="second_section">
    test
    </div>

</div>
</body>

</html>

Main Page CSS:

html, body  {
    margin:0px;
    height:100%;
}

#main {
    width: 100%;
    margin: 0 0 0 0;
    padding: 0;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#header {
    height:90px;
    width:100%;
    background-color:#C03133;
    margin: 0px auto;
}

#header_data {
    height:90px;
    width:1000px;
    background-color:#C03133;
    margin: 0px auto;
    position:relative;
}

#logo {
    position: absolute;
    top: 50%; left: 0%;
    transform: translate(-0%,-50%); /* left,top */
}

#navbar {
    position: absolute;
    top: 90%; left: 100%;
    width:420px;
    transform: translate(-100%,-100%); /* left,top */
}


/* Navigation Bar <ul> */
#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Navigation Bar <li> */
#navbar li {
    display: inline;
    margin: 10px;
}

/* Navigation Bar <a> */
#navbar li a {
    font-size:18px;
    color:#FFFFFF;
}

#first_section {
    background-image:url(../images/bg_low.jpg);
    background-size:cover;

}

#second_section {
    margin: 0px auto;
    position:relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

}

When testing on a laptop using any browser I can resize the page and it is responsive, as expected. However when loaded on a mobile device it just doesn't load.

Are the all the CSS files going to load on a mobile device?

As you can see I have 3 CSS files that pertain to different screen widths. If the mobile device is ONLY loading css/deco_649.css then I could understand why it's not styling correctly.

Upvotes: 0

Views: 1668

Answers (1)

Saeid
Saeid

Reputation: 1663

You have this CSS selector in your "deco_full.css" file.

#first_section {
    background-image: url(../images/bg_low.jpg);
    background-size: cover;
}

This piece defined your image background. But you set this file to be used only when your device screen min width is 1000px. Look at the following reference:

<link rel="stylesheet" media="screen and (min-device-width: 1000px)" href="css/deco_full.css">

But you don't have the same definition for your background in two other CSS files you introduced for you mobile and tablet devices. Add the same CSS (with probably different images) to those two CSS files and you're good.

Upvotes: 4

Related Questions