Hello I am trying to create a responsive Header.

I wanted to have a link Home and Support close together While the Title is in the center. In desktop it looks okay. But when change to mobile devices the style doesn't look ok.

Desktop:

When changed to mobile:

Here is my code:

Header.js

import React from 'react';
import style from './Header.module.css';

import { Link } from 'react-router-dom';

export default function Header() {


    return (

        <div className={style.Appbar}>


            <div className={style.float}><Link className={style.links} to="/">HOME</Link></div>
            <div className={style.float}><Link className={style.links} to="/support">SUPPORT</Link></div>
            <div className={style.floatV2}><p className={style.title} to="/GLA_invite">DESIGN FUTURE LONDON</p></div>

        </div>


    );
}

Header.module.css

.Appbar {
  list-style-type: none;
  margin: 0;
  padding: 0 10%;
  overflow: hidden;
  background-color: #333;
}

.float {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
}

.floatV2 {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bolder;
  font-size: 24px;
}

.title {
  display: block;
  color: white;
  text-align: center;
  text-decoration: none;
}

.links {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.links:hover {
  background-color: #111;
}

CodePudding user response：

Change font-size using media queries. Add this snippet at the end of your CSS.

@media only screen and (max-width: 900px) { 
  .float {
    font-size: 16px;
   }
   .floatV2 {
    font-size: 16px;
   }
 }

You can add more media queries for each desired size of the device viewport. So you can add another

@media only screen and (max-width: 600px) { 
      .float {
        font-size: 10px;
       }
       .floatV2 {
        font-size: 10px;
       }
     }