[Resolved] On Mobile, I want to put the search and reset button next to each other

[Author]

Posts

[FelipeP5703]

I am trying to: On Mobile, I want to put the search and reset button next to each other. I tried adding CSS to the div with no luck. I added the width 50% and the display: in-line block.

Link to a page where the issue can be seen: Using your phone, just go to the home page hidden link

I expected to see: The buttons next to each other.

Instead, I got: One below the other.

[Christian Cox]

I don't think it will be easy to do this with just one Reset button because of the HTML structure. Instead, I would wrap the bottom Reset button in a div with CSS that hides it at smaller screen sizes. Then add an additional reset button next to the search button, and wrap it in a div with CSS that hides it at large screen sizes. It's okay to have more than one reset button in the markup. Bootstrap has responsive utility classes that can help: https://getbootstrap.com/docs/3.3/css/#responsive-utilities

For example, this is only visible on extra small screens like phones:

<div class="visible-xs-block">[wpv-filter-reset output="bootstrap"]</div>

[FelipeP5703]

Christian, I have two Views, one for computer and another for mobile.

For the mobile View, I was able to add this CSS code below and got the results I wanted by using inline and float.

.inline {
  display: inline-block;
}
.floatright {
  float: right;
}

Thank you!

My issue is resolved now. Thank you!