Composants principals pour mobile

Il est temps de passer au css pour mobile concernant les appareils avec une largeur maximale de 850 pixels.

Tout d'abord nous allons écrire la classe css @media screen :

@media screen and (max-width: 850px) {
/* Vos styles css seront là pour la suite du tutoriel */
}

Pour la balise main, nous allons mettre une marge à gauche de 0, et réduisons la taille de la police à 14 pixels.

main {
margin-left: 0;
font-size: 14px;
}

Pour la .navbar, la largeur ne sera plus de 70 pixels mais de 100%, et une hauteur non plus de 100% mais de 70 pixels, et elle sera positionnée en bas.

.navbar {
width: 100%;
height: 70px;
top: auto;
bottom: 0;
}

Pour les liens de la navbar, il y aura une marge de 5 pixels, un padding de 5 pixels, display en inline-flex, alignés horizontalement et verticalement au centre, et pour la largeur, nous allons faire un calcul de 25% - (10 pixels x 2).

.navbar > a {
margin:5px;
padding: 5px;
display: inline-flex;
justify-content: center;
align-items: center;
width: calc(25% - (10px * 2));
}