CODEWITHSUNDEEP
htmlcss
Mehmet
Mehmet

Reputation: 227

How to make responsive padding?

I have a header that I set its right and left padding as 22.5%. Left side consists of logo and right side consists of search. I want them to get position according to page size. If I have small screen then padding should decrease, if I have a big screen padding must increase. How to do it?

http://forum.wpbeaverbuilder.com/support/

You see in these web sites when resolution decrease the logo and navigation(home,forum home..) get closer to corners. I want to do this.

Here the codes:

<header>
    <div id="headLeft">
        <a href="/"><img src="/img/logo.png" alt="Logo" height="65"></a>
    </div>
    <div id="headRight">
        <input id="search" placeholder="Aramak istediğin kelime..">
    </div>
</header>
header {
    height: 65px;
    background-color: #373737;
    padding: 0 22.5% 0 22.5%;
}
#headLeft { float: left; }
#headRight {
    float: right; 
    border-left: 2px solid #FFF;
    margin-top: 15.5px;
}
#search {
    border: none;
    background: transparent;
    margin-left: 7.5px;
    width: 200px;
    position: relative;
    bottom: 5.5px;
    font-family: serif;
    color: #FFF;
    font-size: 17px;
}

Upvotes: 0

Views: 1403

Answers (1)

Johannes
Johannes

Reputation: 67768

This has nothing to do with padding. You can set a percentage width and min-width: 1200px (or whatever value) for the content container and center it by using margin: 0 auto;. (no padding at all)

Upvotes: 1

Related Questions