Can’t align search bar on mobile properly

Raz Ben Zur

#262721

Hi,

Please check the following URL-
https://mool-hatabo.co.il/

I created a search bar to display only on PC & Tablets and added the following css:

.searchandfilter[data-sf-form-id="160"] > ul > li {
	display: inline-block;
	vertical-align: top;
	padding: 0 20px;
}

.searchandfilter[data-sf-form-id="160"] > ul {
    display: table;
    margin: 0 auto 10px;
}

.searchandfilter[data-sf-form-id="160"] > ul > li {
    padding: 0 12px 0 0;
}

Then, I duplicated it and created a new form to display only on mobile and added the following CSS-

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="224"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

I got 2 questions-
A) How can I center the 2nd form (mobile) using css? (including the submit button)
B) Is there a better way to do this or just duplicating the forms is okay?

Thanks in advance.

Add New Note to this Reply

Trevor Moderator

#262745

Having a cloned form will potentially be an issue, as doing this (having more than one instance of the same form, or multiple different forms) will mean that they don’t work together and often will conflict with each other. Just be aware that this is possible (likely), so if you have problems with the results not working, that might be why. Normally, we suggest only one form instance on the results page.

You CAN have more than one form on any page other than the results page.

We are making some changes around this for V3, due in a few months.

This:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="224"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Is code aimed at a desktop, it would look like this for mobile:

@media (max-width: 991px) {
  .searchandfilter[data-sf-form-id="224"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Add New Note to this Reply

Raz Ben Zur

#262814

Hi,

I managed to make it work with a clone form, just use different search bar & results one to display on desktop & tablets and the other one only on mobiles. Not ideal, but it works properly, I’ve checked multiple times.

Thing is now the aligment is good but not perfect. The problem is only with the submit buttons. On desktop it should be a little bit higher and on mobile should be in the center.

How can I fix that?

Add New Note to this Reply

Trevor Moderator

#262820

I didn’t check where your mobile CSS media breaks are, but for desktop alter the padding top and bottom is best, and this also centres the button for you.:

.searchandfilter input[type=submit] {
    padding-top: 6px;
    padding-bottom: 6px;
}
@media (max-width: 767px) {
  .searchandfilter input[type=submit] {
    display: table;
    margin: 0 auto;
  }
}

Add New Note to this Reply

Raz Ben Zur

#262825

It works perfectly, thank you so much! 🙂

Add New Note to this Reply

Trevor Moderator

#262827

Thanks for letting me know. I will close this thread for now.

Add New Note to this Reply

[Author]

Posts