Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Reno Pahnke
Reno Pahnke
3,018 Points

the mobile version of my website is not applied...

Hello,

I'm about to creating a website for practice my HTML and CSS, which is ==>http://dailybible4you.faith/.

Unfortunately in mobile device view my CSS is not applied. I want my website (navigation list items) in mobile view to be stack vertical but when I uploaded it to my server the navigation bar is in display: inline-block. Everything in mobile view is very small and the footer does not stick to the bottom of the page. Could someone look into my page source and give me advice what is wrong?

<!DOCTYPE html>
<html>
<head>
    <title>Daily Bible 4You</title>
    <link charset="utf-8">
    <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div id="logo">
            <a href="index.html">
            <h1>DAILY BIBLE 4 YOU</h1>
            </a>
        </div><!--logo-->
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li class="children"><a href="#">Bible Guide</a>
                <ul>
                    <li><a href="#">Benefits of Daily Bible Verses</a></li>
                    <li><a href="#">10 Bible Verses Everyone Should Know</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>
    <div class="wrapper">
        <section>
            <img src="pic/bible-guide.jpg" alt="profile" />
                <p class="faith"><span style="color: #0e5cb4;">Faith</span><br><span style="color: #136ED5;">can move</span><br><span style="color: #1782fa;">Mountains</span><br><span style="font-family: sans-serif; font-size: 15px;">Matthew 17:20<span></p>
        </section>
    </div><!--wrapper-->
    <footer>
        <p>&copy; 2017 dailybible4you.faith | <a href="#">Privacy Policy</a></p>
    </footer>
</body>
</html>

/****************************
Basics
*****************************/

* {
    margin: 0;
}



body {
    background-color: #fff;
}



html body nav ul li span {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    margin-top: 25px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
}

/****************************
Wrapper
*****************************/


.wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 5%;
}




/****************************
Color
*****************************/

h1 {
    color: #fff;
}

nav ul {
    background-color: #f905ea;
}

nav ul li a {
    color: #fff;
}

nav ul li a:hover {
    background: purple;
}

header {
    background-color: purple;

}

/****************************
Section
*****************************/

section {
    display: flex;
    flex-direction: column;
    padding-left: ;
    align-items: center;
    margin: ;
}

.faith {
    text-align: center;
    font-family: 'Changa One', sans-serif;
    font-weight: normal;
    font-size: 35px;
    margin: 0 0 25px 0;
}

/****************************
Footer
*****************************/

footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


/****************************
Heading
*****************************/

header {
    float: ;
    margin: 0 0 0px 0;
    padding: 10px 0 20px 0;
    width: 100%;
}


#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}



li {
    list-style: none;
}



a {
    text-decoration: none;
}



nav ul {
    text-align: ;
    padding: 0;
}



nav li {
    font-weight: ;
    font-family: sans-serif;
}



nav ul li a {
    display: block;
    padding: .8rem 1rem;
    font-weight: bold;
    text-align: left;
}


.children ul li a {
        padding-left: 2rem;
    }



/****************************
Media Queries
*****************************/


@media screen and (min-width:480px){

    nav li {
        display: inline-block;
    }

    nav ul {
        text-align: center;
    }



    nav ul li a {
        padding: 1.6em 2rem;
    }


    /* Dropdown Content (Hidden by Default) */

    .children ul {
        display: none;
        position: absolute;
        width: 250px;
    }


    /* Show the dropdown menu on hover */

    nav ul li:hover ul {
        display: flex;
        flex-direction: column;
    }

    nav ul li {
        position: relative;
        flex: ;
        text-align: center;
    }



}

1 Answer

Flor Antara
Flor Antara
12,372 Points
Flor Antara
Flor Antara
12,372 Points

Hi Reno,

You need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in your <head> section.

More information here: https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

Reno Pahnke
Reno Pahnke
3,018 Points

Thank you so much Flor. It works now hehehehe....