[Closed] how to make search box responsive?

[coolinfoforme]

i have made my menu items responsive , using @media min and max but the search box lying on the header is not responsive , after resizing the window , menu icons goes under the search box.

[TheDoc]

Change the styles for the search box.

[shaundunne]

Hi coolinfoforme,

Are you able to get a codepen or jsbin example of you code that isn’t working up?

[coolinfoforme]

@shaundunne no , i can’t show it up because my boss doesn’t want me to disclose the (title , styles , theme) now , also i have not made any demo . but here’s the main.css code that i used with @media for menu,

* {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 12px;
background-color: #eff5f9;
}
.headerMenu {
background-image:url(../img/menu_bg.png);
height: 56px;
border-bottom:0px;
padding-left: auto;
padding-right: auto;
width: 100%;
position:fixed;
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 100%;
padding-left: 0px;
padding-right: 0px;
background-image:url(../img/menu_bg.png);
}
.logo {
width: 125px;
}
.logo img {
padding-top: 5px;
width: 150px;
height: 38px;
background-image:url(../img/menu_bg.png);
}
.search_box {
background-image:url(../img/menu_bg.png);
position:absolute; top:13px;
margin-left: 135px;
}
#search input[type=”text”] {
background: url(../img/search-white.png) no-repeat 10px 6px #267bb6;
outline:none;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
width:350px;
padding:6px 15px 6px 35px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-bottom: 0px;
margin-top: 0px;
}
#search input[type=”text”]:focus {
background:url(../img/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 350px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255,255,255, 0.1), 0 1px rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 4%;
}
}
@media screen and (min-width:1280px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 6%;
}
}
@media screen and (min-width:1400px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right:0px;
height: 37px;
padding-top: 19px;
margin-right: 10%;
}
}
@media screen and (min-width: 1920px) {
#menu {
background-image:url(../img/menu_bg.png);
position:absolute; top:0px; right: 0px;
height: 37px;
padding-top: 19px;
margin-right: 25%;
}
}
#menu a {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg.png);
background-repeat: no-repeat;
padding-top: 19px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
#menu a:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
background-image:url(../img/menu_bg_hover_mouse_over.png);
background-repeat:no-repeat;
padding-top: 18px;
padding-bottom: 22px;
padding-left: 10px;
padding-right: 10px;
}
h2 {
font-family: Arial;
font-size: 18px;
padding:5px;
color: #0084c6;
}
input[type=”text”] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size:15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type=”text”]:hover {
border: 1px solid #0084C6;
}
input[type=”password”] {
background-color: #FFFFFF;
border: 1px solid #E2E2E2;
font-size:15px;
padding: 5px;
width: 300px;
margin-bottom: 3px;
margin-top: 3px;
outline:none;
}
input[type=”password”]:hover {
border: 1px solid #0084C6;
}
input[type=”submit”] {
background-color: #006FC4;
border: 1px solid #00508D;
font-size: 15px;
color: #FFFFFF;
padding: 5px;
margin-bottom: 3px;
margin-top: 3px;
border-radius: 7px;
}
.homepageTable {
padding: 10px;
}
.textHeader {
background-color: #F3F6F9;
width: 190px;
height: 15px;
padding: 5px;
border-bottom: 1px solid #DCE5EE;
font-weight: 600;
}
.profileLeftSideContent {
width: 194px;
padding-right: 0px;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 0px;
height: 200px;
}
.postForm {
float: right;
width: 580px;
height: 80px;
background-color: #F3F6F9;
padding: 5px;
}
.profilePosts {
float: right;
width: 580px;
height: 414px;
background-color: #DCE5EE;
padding: 5px;
}
hr {
background-color: #DCE5EE;
height: 1px;
border: 0px;
}

[Kitty Giraudel]

I won’t speak for the others, but I won’t dig into 200 lines of CSS without any syntax highlighter, line number or indentation.

Just make a reduced test case with fake content reproducing your issue.

[Paulie_D]

Ditto.

Codepen is your friend.

[coolinfoforme]

ok , thanks.

[latass]

can u just explain the code??

[__]

I won’t speak for the others, but I won’t dig into 200 lines of CSS without any syntax highlighter, line number or indentation.

+1.

and the relevant HTML markup.

[nixnerd]

I won’t speak for the others, but I won’t dig into 200 lines of CSS without any syntax highlighter, line number or indentation.

this ++

[Paulie_D]

Closing as an old unnecessarily bumped thread.

[Author]

Posts