Placeholder mobile customization

[Marius FarcasParticipant]

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!

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

I think the placeholder text needs a different rule for CSS3 supported browsers.

Try something like:

@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; 
  }
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Marius FarcasParticipant]

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!

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

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?

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Marius FarcasParticipant]

Yes!
But is private, not live yet.
Where I can give you user/pass private?

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Marius FarcasParticipant]

attached.

Search form is on homepage.

Theme custom css: dashboard divi-> theme options (page down) – first is your code for mobile.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

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:

@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;
  }
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts