- This topic has 7 replies, 2 voices, and was last updated 10 years, 9 months ago by
.
-
Posts
-
Hi,
On plugin menu: Theme options I use Font size: 20px and line-height: 25px and is Ok for Desktop devices.
For mobile I want to use default plugin settings: font-size: 12px and line-height: 15px.
So in my theme style.css I use:@media only screen and (max-width: 980px) {
input.orig {
font-size: 12px!important;
line-height: 15px!important;
}}I inspect element on chrome and I do not understand why does not working.(see attached screenshot).
Can you please provide me the CSS for mobile to have default placeholder font size and line-height? 12px; 15px?
Thanks in advance!Hi!
I think the placeholder text needs a different rule for CSS3 supported browsers.
Try something like:
[code]
@media only screen and (max-width: 980px) {
input.orig,
input.orig::-webkit-input-placeholder,
input.orig:-moz-placeholder,
input.orig::-moz-placeholder,
input.orig:-ms-input-placeholder {
font-size: 12px !important;
line-height: 15px !important;
}
}
[/code]I think somewhere is a bug because: The settings are applied(far as I see in chrome inspected element) but visual the font size remain 20px.
See attached picture!
Other solution?
Thanks in advance!
I have no idea, the rule seems to apply correctly as the inspector tells. It doesn’t seem there is anything conflicting either. I just tried on my test environment, but I was able to change the placeholder text with that rule.
Do you have an url where I can see this?
You can edit the first post in this thread and add the private details, or upload a txt file with them. Both are safe, and visible only for me and you.
attached.
Search form is on homepage.
Theme custom css: dashboard divi-> theme options (page down) – first is your code for mobile.
Okay, I think I found it. So I googled a bit, and it seems like that each placeholder must have a separate rule, otherwise it won’t work. Strangest thing I have ever seen. So the final solution is:
[code]
@media only screen and (max-width: 980px) {
input.orig{
font-size: 12px !important;
line-height: 15px !important;
}
input.orig::-webkit-input-placeholder {
font-size: 12px !important;
line-height: 15px !important;
}
input.orig:-moz-placeholder {
font-size: 12px !important;
line-height: 15px !important;
}
input.orig::-moz-placeholder {
font-size: 12px !important;
line-height: 15px !important;
}
input.orig:-ms-input-placeholder {
font-size: 12px !important;
line-height: 15px !important;
}
}
[/code]
- You must be logged in to reply to this topic.