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 Zeeshan Dawood
Zeeshan Dawood
7,210 Points

Responsive vertical alignment

My objective is to have the .main-header-top take up 25% of the height of the black background, and the .main-header-bottom take up about 75% of the height of the black background. but I want it to be responsive to the viewport.

I looked up a bunch of websites. http://www.vanseodesign.com/css/vertical-centering/ that was sort of helpful, but im not understanding how those translate to li. 

<doc html>
    <head>
        <title>Zeeshan Dawood</title>
        <link rel="stylesheet" href="normalize.css">
        <link rel="stylesheet"  type="text/css" href="mystylesheet1.css">
        <link href='http://fonts.googleapis.com/css?family=Josefin+Sans|Armata|Source+Code+Pro:400,900,700,600' rel='stylesheet' type='text/css'>


    </head>
    <body>

        <div class="main-wrapper">
            <div class="color-boxes" id="color-strip">
                <ul class="flex-container">
                    <li class="flex-item">1</li>
                    <li class="flex-item">2</li>
                    <li class="flex-item">3</li>
                    <li class="flex-item">4</li>
                    <li class="flex-item">5</li>
                    <li class="flex-item">6</li>

                </ul>
            </div>

            <div class="main-header">
                <div class="main-header-top">
                <h1>Zeeshan</h1>
                <h1>Dawood</h1>
                </div>

                <div class="main-header-bottom">
                    <ul>
                        <li>Artist</li>
                        <li>Designer</li>
                        <li>Developer</li>

                    </ul>
                 </div>
            </div>

            <div class="main-bottom">
                <div class="img-contain">

                <img src="Alaska-mountain.jpg" id="bg" class"img" alt="">
                </div>
            </div>


        </div>
        <script src="jquery.js"></script> 
         <script src="myscript.js"></script>

    </body>

    </html>

/*ZEESHAN'S PERSONAL WEBSITE*/
*{
    padding:0px;
    margin:0px;
}
/********************************
    BACKGROUND
*********************************/

.main-wrapper{
        background-color:white;
        width:auto;
        height:100%;
        margin:auto;
}

/********************************
    Color Boxes Bar
*********************************/
.color-boxes{
    background-color:red;


}
.flex-container{
    background-color:yellow;
    padding:0;
    margin:0;
    list-style:none;




      display: flex;



     justify-content: space-around;
}     



.flex-item{

    background-color:blue;
    padding:0px;
    width:auto;
    height:10%;
    margin:0px;

    flex-grow:1;


    color:white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;

}

/********************************
    Main Header
*********************************/

.main-header{

            background-color:black;
            height:75%;
            color:white;
            margin-top:0;
            padding:0;
            border:0;

            text-align:center;
            text-transform:uppercase;



}
main-header-top{
        position:relative;
    }

h1{


    margin:0 auto;
    font: 'Source Code Pro', bold;
    font-size:4em




    }

.main-header-bottom ul{
    height:100%;
    text-align: center;
    }

.main-header li
{
        vertical-align:top; 
        display:block;
        margin:10px 10px;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 3em; 
            }




/********************************
    Main bottom
*********************************/
.main-bottom{
            background-color:gray;
            color:white;
            margin:0;
            padding:0;
            border:none;
            padding: 1px;
            height:15%;

}
.img-contain {
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
            overflow: hidden;
}

}   

    }
/********************************
    Media Query 1
*********************************/

//myscript

$(document).ready(function(){
    var color=['red','orange','yellow','green','blue','purple'];
        $('.flex-item').each(function(i){
            $(this).css('backgroundColor',color[i]);
        });
});

1 Answer

Victor Ruiz
Victor Ruiz
16,570 Points
Victor Ruiz
Victor Ruiz
16,570 Points

I would try adding padding to the flex-item class use percentages. I would try and use pixels first but then I would suggest using percentages in order to target certain viewport. Here is a quick change I did:

.flex-item{

    background-color:blue;
    padding:0px;
    width:auto;
    height:10%;
    margin:0px;

  padding:30px 30px;

    flex-grow:1;


    color:white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;

}

Not sure if that solves your question though.