Problems with getting the columns aligned in different viewports.

[KaalundParticipant]

We are already using the Ajax Search Pro plugin and have set it up, but no matter what we do (we have searched the knowledge base as well) we cant seem to center the widget on mobile and tablet. We have used CSS .asp_sb_1 {margin: 0 auto !important;
} in the custom CSS tab in the plugin, but it doesn’t help. This is an issue, we have been trying to solve for a long time now. Any idea what we can do? I have some pictures of the showing on tablet and mobile, please see attached.
Any help will be greatly appriciated.

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Hi!

Thank you for the details! I tried to log-in to the back-end to check the settings, but the admin login does not seem to work with these details.

I probably don’t need them anyway. For the settings items to center, try using this custom CSS:

div.asp_sb.asp_sb_1.searchsettings form {
    justify-content: center;
}

Because the search is in a custom shortcode via the shortcode builder, and I see a 75% ratio, it cannot center itself, as the container is smaller than the rest. Try centering the container itself with this custom CSS:

.asp_shortcodes_container {
    justify-content: center;
}

These two custom CSS codes will result in this layout: https://i.imgur.com/Zjj6T3K.png

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

[KaalundParticipant]

Hello Ernest, thanks for the reply. I changed the 75% ratio to 100% and it looks good on desktop. I get the layout you sent a picture of, how ever the searchfilters still don’t align under the search field, they are a bit to the left and exceed the space of the searchbar, any way to change this?

[Ernest MarcinkoKeymaster]

Hi,

It is perferctly centered, if you check this screenshot: https://i.imgur.com/g2jeFEZ.png
The containers including the filters are wider as the text itself, namely set to 150px width in your case, which looks perfectly fine, as it almost reaches the edge of the longest text line (Lateral Thinking).
You could force a right aligned text for the labels to fit the whole filter area, but it would not look great in my opinion: https://i.imgur.com/dElBMb2.png

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

[Author]

Posts