Placeholder mobile customization

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Placeholder mobile customization

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #5737
    Marius Farcas
    Marius Farcas
    Participant

    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.
    #5739
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #5741
    Marius Farcas
    Marius Farcas
    Participant

    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.
    #5743
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #5744
    Marius Farcas
    Marius Farcas
    Participant

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

    #5745
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #5746
    Marius Farcas
    Marius Farcas
    Participant

    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.
    #5748
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.