Search code examples
cssreactjsheadernavbarnav

Links are display into two rows (React, css)

I have some Header:

<header>
 <div>                              
  <Link to="/" class="navbar-brand">Home</Link>
  <Link to="/test" class="navbar-brand">Test</Link>
  <Link to="/test2" class="navbar-brand">Test2</Link>
  <Link to="/test3" class="navbar-brand">Test3</Link>
 </div>
</header>

Into css I got only this:

header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
}

When I tried to display it into phone it looks like links are into 2 rows.

It's possible to somehow make it smaller that will be display into one line?

Screen from phone:

enter image description here

Solution

  • You can try this to prevent your flex container from shrinking:

    header {
  background: rgb(73, 176, 236);
  display: flex;
  align-items: center;
  flex: 1 0 auto
}

    Moreover, for a better UI, you can aim for relative units such as rem. Which is the base font size of the agent (16 px on most browsers).

    font-size: 1rem;

    and then change the base font depending on the viewport:

    @media only screen and (max-width: 600px) {
  body {
      font-size: 12px;
  }
}

    this will allow you to scale, as all the rem units you've utilized for selectors will now increase and decreased accordingly.