Some CSS issues

[Jan TrierParticipant]

Hey Ernest,

me again 😀

I found some little bugs/issues and I don’t get it fixed.. So, I would be very grateful if you could help me.

1. I try to change the font size for mobile devices in the main search. And it is working with this CSS code:
@media (max-width: 500px) {
#ajaxsearchpro4_1 > div > div.proinput > form > input.orig { font-size: 12px !important;}
#ajaxsearchpro4_1 > div > div.proinput > form > input.autocomplete { font-size: 12px !important; }
}

But I cannot change the placeholder size for mobile phones. Is there any way to do this? – If yes, how?

2. If you check you mobile phone, not the device toolbar in Chrome on your pc, I mean the real smartphone, you see, that in both searches, in the navigation and in the main search, the results gets attached in the middle of the search bar. Same question again:
Is there any way to change that and if yes, how?

I already tried myself with CSS… but failed..

Greetings and Thank You!
Jan

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi Jan,

1. The placeholder size might be forced by another CSS, and it needs a bit more complicated code to actually change it, as I learned it some time before, let me show you. I would recommend this custom CSS for that:

@media (max-width: 500px) {
  #ajaxsearchpro4_1 > div > div.proinput > form > input.orig { font-size: 12px !important;}
  #ajaxsearchpro4_1 > div > div.proinput > form > input.autocomplete { font-size: 12px !important; }
  
  #ajaxsearchpro4_1 > div > div.proinput > form > input::-webkit-input-placeholder {
    font-size: 12px !important;
  }
  #ajaxsearchpro4_1 > div > div.proinput > form > input::-moz-placeholder {
    font-size: 12px !important;
  }
  #ajaxsearchpro4_1 > div > div.proinput > form > input:-ms-input-placeholder {
    font-size: 12px !important;
  }
  #ajaxsearchpro4_1 > div > div.proinput > form > input:-moz-placeholder {
    font-size: 12px !important;
  }
}

Basically for placeholder changes they have to be separate rules for each browser, because otherwise the browsers will not recognize them (some kind of bug that exists for years now).

2. That is my fault, I set a negative margin for testing regarding the previous ticket via the back-end, and I forgot to re-set it. Sorry about that, I have removed that margin, it should be okay now.

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

[Jan TrierParticipant]

Thank you!

[Author]

Posts