Search Widget Placeholder

[Rahim]

Hi Harry,

How can I hide the placeholder of the search widget in my blog page? Blog

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

And also want to make it center align in the mobile view

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

@media only screen and (min-width: 1025px) {
.widget .search-form .search-field::-webkit-input-placeholder {
	color: #fff;
}
.widget .search-form .search-field:-moz-placeholder {
	color: #fff;
}
.widget .search-form .search-field::-moz-placeholder {
	color: #fff;
}
.widget .search-form .search-field:-ms-input-placeholder {
	color: #fff;
}}
@media only screen and (max-width: 767px) {
.widget .search-form .search-field::-webkit-input-placeholder {
text-align: center;
}
.widget .search-form .search-field:-moz-placeholder {
	text-align: center;
}
.widget .search-form .search-field::-moz-placeholder {
	text-align: center;
}
.widget .search-form .search-field:-ms-input-placeholder {
	text-align: center;
}}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

after the code the desktop is fine but the mobile is still like before the change.

Desktop :

Mobile :

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Hi Rahim,

Please add below code

@media only screen and (max-width: 767px) {
.widget_search { text-align: center;}
}

Best regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Rahim]

Hi Harry,

This is what I have added :

/* search widget */
@media only screen and (min-width: 1025px) {
.widget .search-form .search-field::-webkit-input-placeholder {
color: #fff;
}
.widget .search-form .search-field:-moz-placeholder {
color: #fff;
}
.widget .search-form .search-field::-moz-placeholder {
color: #fff;
}
.widget .search-form .search-field:-ms-input-placeholder {
color: #fff;
}}
@media only screen and (max-width: 767px) {
.widget .search-form .search-field::-webkit-input-placeholder {
text-align: center;
}
.widget .search-form .search-field:-moz-placeholder {
text-align: center;
}
.widget .search-form .search-field::-moz-placeholder {
text-align: center;
}
.widget .search-form .search-field:-ms-input-placeholder {
text-align: center;
}
.widget_search {
text-align: center;
}}

And now I see that in the ipad mini the placeholder is still there and in the ipad it’s not center aligned!

Rahim Vaziri
CEO & Founder at Look.ir

[Rahim]

Harry,

I think there is no need of @media only screen and (min-width: 1025px) because I don’t want to have the placeholder on all resolutions and the 767px should be changed to the 960px or something less.

Beside this I didn’t find any string translation for the placeholder of the search widget in the theme.

If I had that I could hide it with one space instead of css use!

Am I right?

And for the first time I used the search feature and found that when the website finds the results, there is no sidebar in the result page, and the result page is so empty without any sidebar,

Check Here

How can I add primary sidebar in the results page?

Thank you.

Rahim Vaziri
CEO & Founder at Look.ir

[Harry]

Yes, please change @media to screen what you want it do.

/* search widget */
.widget .search-form .search-field::-webkit-input-placeholder {
color: #fff;
}
.widget .search-form .search-field:-moz-placeholder {
color: #fff;
}
.widget .search-form .search-field::-moz-placeholder {
color: #fff;
}
.widget .search-form .search-field:-ms-input-placeholder {
color: #fff;
}
@media only screen and (max-width: 960px) {
.widget .search-form .search-field::-webkit-input-placeholder {
text-align: center;
}
.widget .search-form .search-field:-moz-placeholder {
text-align: center;
}
.widget .search-form .search-field::-moz-placeholder {
text-align: center;
}
.widget .search-form .search-field:-ms-input-placeholder {
text-align: center;
}
.widget_search {
text-align: center;
}}

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts