CODEWITHSUNDEEP
htmlcss
user2135867
user2135867

Reputation:

how to make my css header responsive

Im using this CSS:

#header-topbar {
    width:100%;
    height:120px;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    position: absolute;
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}

for my header and i want to make it responsive. i know how to use the media queries but im not sure about the rest of the css.

how do i make it so the logo div displays at the top, centered and then the text to display below?

i have created a fiddle here: http://jsfiddle.net/bMsMw/ so you can see the html

thanks

Upvotes: 0

Views: 7210

Answers (2)

jhunlio
jhunlio

Reputation: 2660

check this demo

in #header-topbar to make easy to manipulate in media query height should not state,
in #logo is there reason why you position:absolute that is one reason why your logo not go down because of absolute:position it display on the top of element,

#header-topbar {
    float:left;
    width:100%;
    padding-top:5px;
}
#header-right-content {
    float:right;
    margin-right:14%;
    margin-top:20px;
    font-size:20px;
    text-align:right;
    color:#000000;
}
#logo {
    float: left;
    margin-left: 15%;
    margin-top: 25px;
    width: 360px;
    height: 50px;
}
#logo img {
    max-width:100%;
    width:100%;
}
@media handheld, screen and (max-width: 620px){
    #logo{
        width:70%;
        float:none;
        margin-left:auto;
        margin-right:auto;
    }
    #header-right-content {
        float:left;
        width:100%;
        text-align:center;
    }

}

hope this help you..

Upvotes: 2

daniel
daniel

Reputation: 1433

Like this? http://jsfiddle.net/bMsMw/1/ Not exactly sure how the image should fit.

code

Upvotes: 0

Related Questions