[Resolved] Advanced Search in wrong place on mobile devices

[Author]

Posts

[Mark Dally]

Hi - please refer to example theme: hidden link

Particularly the parametric search as viewed on tablet or mobile device.

The "Advanced Search" renders in the wrong place - it is wedged between the Garage and basements fields and the Property Types. But interestingly, when activated, the drop down IS in the right place.

I've been playing with the CSS to try and fix it (i.e. move it underneath Property Types where I think it should be) but it doesn't seem straight forward to me and I keep messing it up.

I'm hopeful perhaps you can offer some replacement CSS??

[Beda]

Well, I see a issue in that HTML

1. You render col-sm-4 in a row.
By default, a Bootstrap row holds 12 cells.
So, you could include 3 col-sm-4 div's in a row, and those display inline-
Every additional one will fall below the first 3

2. If you instead code a new Row, and include again your cell's (div class="col-sm-4" as example) you can have those new cells always in a new row.

3. To finalize, I would create 3 Rows.
First row holding 3 "4 col" div
Second row holding 2 "6 col" div's
And then a last row, again with 2 "6 col" divs, first holding the link to conditionally show the additional advanced search, second to hold the submit button

I also reported this to our Reference Site Developers to adjust it.

Thank you for reporting it.

[Mark Dally]

I Beda,

Thank you - my limited CSS has most of your suggestion working okay - but lacking a few finer points - and I can't get the columns within the rows to look the way I want.

I understand this might be a custom fix, but in the meantime, can you kindly advise when the demo is updated so I can see where I am going wrong?

Thanks you,
Mark

[Beda]

As I received feedback from our DEV:

In hyper-accurate Bootstrap world it is true what I stated above:
we should have 3 separate rows.
But as our DEV team decided,
we should not be enslaved by Bootstrap, we should use it to make our lives easier.

So as it comes to rows: It will stay like it is because it works exactly as I intended to.
As it comes to the link in the wrong place: You are right.

The changes added are really cosmetic:

1. Added class advanced-search-column to search column with advanced search link

2. Added styles to that column: top margin and p bottom margin so that it is positioned like in the ScreenShot Attached

3. Made advanced search column to be the last one before search button in the visible part of the search form.

The changes will be applied soon.

You may then use the fixed reference Site as a learning tool

[Mark Dally]

Thank you very much for your speedy attention as it is one of the last things bugging me on my starter theme based site 🙂 I look forward to seeing the changes and I'll keep an eye out for them to be made.