Home › Forums › Product Support Forums › Ajax Search Pro for WordPress Support › Problems with getting the columns aligned in different viewports.
- This topic has 3 replies, 2 voices, and was last updated 5 years, 8 months ago by
Ernest Marcinko.
-
AuthorPosts
-
September 23, 2020 at 2:16 pm #29503
Kaalund
ParticipantWe 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.September 23, 2020 at 2:23 pm #29507Ernest Marcinko
KeymasterHi!
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
October 5, 2020 at 12:50 pm #29627Kaalund
ParticipantHello 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?
October 5, 2020 at 1:28 pm #29628Ernest Marcinko
KeymasterHi,
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 -
AuthorPosts
- You must be logged in to reply to this topic.