Docs

[Nharris321]

Hi Team,

I have a search tool placed in my site’s navbar using custom CSS. I have styled it so it displays differently on different screen sizes. I cannot figure out how to hide on it mobile. Here is how I am using css to display the search tool (the domain is http://173.254.65.135/):

@media (max-width:480px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
display: none;
}
}

@media (max-width:1920px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 100px;
}
}

@media (max-width:1680px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 50px;
}
}

@media (max-width:1600px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 100px;
}
}

@media (max-width:1440px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 200px;
}
}

@media (max-width:1280px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 200px;
}
}

@media (max-width:1024px) {
form.wpv-filter-form.js-wpv-filter-form.js-wpv-form-only {
max-width: 900px;
margin: 0 auto 1.313em;
float: center;
padding-left: 250px;
}
}

// end search bar styling

[Paul R]

Hi,

Please change all your css comments to /*..*/ instead of //

eg.

Change this

//search bar styling

to this

/* search bar styling */

Comments in CSS

Thanks

[Author]

Posts