Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Some CSS issues
- This topic has 2 replies, 2 voices, and was last updated 9 years, 1 month ago by
Jan Trier.
-
AuthorPosts
-
April 13, 2017 at 9:23 pm #12687
Jan Trier
ParticipantHey 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!
JanApril 14, 2017 at 10:01 am #12699Ernest Marcinko
KeymasterHi 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:
[html]
@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;
}
}[/html]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.
April 14, 2017 at 2:43 pm #12713Jan Trier
ParticipantThank you!
-
AuthorPosts
- You must be logged in to reply to this topic.