Some CSS issues

This topic contains 2 replies, has 2 voices, and was last updated by Jan Trier Jan Trier 5 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #12687
    Jan Trier
    Jan Trier
    Participant

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

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


    #12713
    Jan Trier
    Jan Trier
    Participant

    Thank you!

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

You must be logged in to reply to this topic.