Center align horizontal navigation

Anonymous

#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

#222073

I think this simple CSS should do it:

#search-filter-form-587 {
  display: table;
  margin: 0 auto;
}

Anonymous

#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

#222129

And thanks btw! 😉

Trevor

#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