Адаптивный дизайн: проблема отображения меню на 2 страницы (всего 5) - PullRequest
Новая
       43

Адаптивный дизайн: проблема отображения меню на 2 страницы (всего 5)

0 голосов
/ 05 августа 2020

Я француз и разрабатываю свой веб-сайт.

Мне нужна ваша помощь, потому что у меня есть проблема с адаптивным дизайном.

В моем меню 5 страниц. Я написал этот код CSS для меню в соответствии с размером экрана (лист: css / style-prov ie. css): 

@media screen and (max-width: 572px) {
    #menu_principal {
        position: relative;
    }

        #menu_principal > ul {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        #menu_principal ul li {
            margin: 0;
            width: 100%;
        }

    #sous_menu_principal {
        position: relative;
    }

        #sous_menu_principal > ul {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

        #sous_menu_principal ul li {
            margin: 0;
            width: 100%;
        }
}

Результат подходит для 3 страниц, но не для двух других, и я не понимаю, потому что код одинаковый для всех страниц. [введите здесь описание изображения] [1]

---> Для этих двух страниц результат отображается так, как если бы я не использовал медиа-запросы. [1]: https://i.stack.imgur.com/zvpDo.jpg

Далее вы можете найти код HTML для одной из этих 2 страниц:

---> Страница событий (Evènements) : 

<meta charset="utf-8">

<title></title>

<link rel="stylesheet" href="css/style-provie.css">
<link rel="stylesheet" href="css/vanillaCalendar.css"  >
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/jquery-ui.structure.min.css">
<link rel="stylesheet" href="css/jquery-ui.theme.min.css">
image
...