search text, Magnifier & loading icon responsiveness

[minhdoParticipant]

Hello Support team,
I have the search plugin on my homepage, which I have by inserting the shortcode to the revolution slider. However, I dont know why the text get so small and not in the center of the search area, it looks very strange in small screen or phone/tablet view (please find screenshot attached). ALso the position of the close and loading icon is not very well adjust, you can also test it in the link I gave you in “Private Details” section. Please let me know how I can adjust this.

Thanks a lot

• This topic was modified 6 years, 1 month ago by  minhdo.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi,

I’ve looked at the page source through the dev tools console, and it looks like the rev slider is changing the font-size via a forced style attribute. I guess it is some sort of fix for another widget or something similar.

To override that feature, use this custom CSS:

.probox input {
    font-size: 12px !important;
}

This will force the original 12px height on the input fonts. Apply this code to your theme custom CSS field (if it supports it) or use the custom CSS field on the search plugin back-end.

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

[minhdoParticipant]

Hi,
thanks alot, I will try that out

[minhdoParticipant]

regarding the loading icon, the position of it when it is loading to get the suggestion, does it also being affected by the slider? cause the position of it is not in the search bar at all.

Also, refer to the screenshot I attached with this message, could you please tell me if there is a way I can style or change the type of scroll bar in the search suggest?

Thanks alot

• This reply was modified 6 years, 1 month ago by  minhdo.

Attachments:

You must be logged in to view attached files.

[minhdoParticipant]

You cannot access this content.

[Ernest MarcinkoKeymaster]

Hi!

Yes, unfortunately that is affected as well. From what I can see, it is the fixed margin that causes the problem. This should resolve it:

.asp_ball-pulse>div {
    margin: 0 !important;
    margin-top: 40% !important;
    margin-left: 10% !important;
}

If you prefer to use the browser scrollbar, then you can turn off this one under the Compatibility Options submenu: https://i.imgur.com/HjghyFM.png
This way the browser scroll bar will be used.

If you prefer to use the custom scrollbar script, there are no style options on the back-end, but it is possible to change the colors with custom CSS. I have made a few sample CSS rules, all you need to do is change the colors to your needs.

Dragger rail background color:

.mCSBap_draggerContainer .mCSBap_draggerRail {
    background: #ffff61 !important;
}

Dragger bar background color:

.mCSBap_draggerContainer .mCSBap_dragger_bar {
    background: #ff6767 !important;
    box-shadow: none !important;
}

Scroll Down button:

.mCSBap_buttonDown {
    border-color: rgb(0, 187, 142) transparent transparent transparent !important;
}

Scroll up button

.mCSBap_buttonUp {
    border-color: transparent transparent rgb(0, 187, 142) transparent !important;
}

I hope this helps!

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

[Author]

Posts