Forums › Forums › Search & Filter Pro › Center align horizontal navigation

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Anonymous
    (Private)  September 26, 2019 at 3:15 pm #222015

    Hey!

    How to center align the search form? I want it to be aligned right over the display output. But for some reasons everything aligns to the left! Tried basically everything to correct this. Same applies with the responsive layout – it just looks weird! Would be nice to align everything under each other with full auto width.

    The link is: http://www.erlinghoi-nielsen.dk/beta2020/find-bil/

    Trevor
    (Private)  September 26, 2019 at 5:49 pm #222073

    I think this simple CSS should do it:

    #search-filter-form-587 {
  display: table;
  margin: 0 auto;
}
    Anonymous
    (Private)  September 26, 2019 at 8:52 pm #222127

    Yeah that worked centering the navigation! It didn’t help the responsiveness though! :'( I would like all the elements to align nicely underneath each other with full with, if you know what I mean? 🙂

    Anonymous
    (Private)  September 26, 2019 at 8:52 pm #222129

    And thanks btw! 😉

    Trevor
    (Private)  September 27, 2019 at 10:07 am #222147

    Responsiveness is handled with CSS media queries.

    Do you have a breakpoint for mobile? Let’s say mobile is 600px and less, and desktop is 601px and more, then the code I gave you would become:

    @media only screen and (min-width: 601px) {
  #search-filter-form-587 {
    display: table;
    margin: 0 auto;
  }
}

    Similarly, inside that you could put the code you already used to make the form horizontal.

    Then, by default, on mobile the form would become vertical and not centered.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)