Почему мой обернутый компонент сетки на адаптивной странице не связан с правильным классом, определенным в стиле @media ⇐ CSS

[Anonymous]

Код: Выделить всё

[github repository](https://github.com/PEG11690/coursera-mod2-solution/tree/main)
[github page](https://peg11690.github.io/coursera-mod2-solution/)

Я прохожу вводный курс, и мне дали задание, в котором мне не нужно использовать какие-либо платформы, такие как Bootstrap, а создать адаптивную страницу с тремя блоками, которые текст и еще одно поле, содержащее «заголовок» в правом верхнем углу. Эти блоки должны иметь равные поля вокруг себя и по краю представления.
Страница спроектирована так, чтобы иметь три размера (настольный компьютер, планшет, мобильный телефон), которые соответствуют минимальной ширине в элемент @media.

• Рабочий стол (col-lg-4) должен иметь одну строку (div class="row"), в которую встроен другой элемент div с результаты @media, чтобы установить количество компонентов, за которыми следует еще один div с класс, определенный для установки ширины 90% компонента сетки (для интервала) и добавления некоторых других стилей и некоторого поля внизу.
• Таблица (col-md-6 и col- md-12) В этом размере ожидаемый результат состоит в том, что первые два компонента должны находиться в верхней строке, занимая 50% (с их встроенным элементом div для размера, устанавливающим аналогичную ширину 90% для интервала), а третий компонент, который будет обернуть, должно быть 100% страницы (col-md-12) со встроенным элементом div для размера, устанавливающим его на 95%, поскольку по какой-то причине это соответствует 90% в верхней строке.
• Мобильный (col-sm-12). Это должен быть наименьший размер, и все три компонента должны быть заключены в три строки, каждая из которых занимает 100 % страницы, а их встроенный элемент div имеет ширину 95 %.

HTML

Код: Выделить всё

Coursera Module 2 Solution
[*]  




Our Menu


 

                
Chicken

Dummy Text Here for Chicken.





               
Beef

Dummy Text Here for Beef.






Sushi

Dummy Text Here for Sushi.

CSS

Код: Выделить всё

/*
Objective is to use just CSS to create a responsive page that will have 3 sizes. In each
of these sizes there will be 3 boxes (set at 90% to create some margin) which have some
text and another title box in the upper right corner of the text box, along with
consistent spacing between the 3 boxes:
- Desktop ( >= 922 px)
Grid with 3 equal size that are in a single horizontal line.  Should pick up
.col-lg-4 class defined below.
- Table (>=768px to < 922 px)
This will have a wrap effect, where the top row (1st 2 grids) should be 50% of the
webpage (.col-md-6) and the wrapped 3d row should be 100% of the page but still providing
the same margin (believe this is really 95% margin to keep boxes aligned
- Mobile (=922 px*/
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}

}

div.col-lg-4 > div.secText {
/*This is meant to be picked up the .secText div when at desktop size*/
width: 90%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;
}

/********** Tablet **********/
@media (min-width: 768px) and (max-width: 921px) {
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12
{
float: left;
/* border: 2px solid green; */
}
.col-md-1 {
width: 8.33%;
}
.col-md-2 {         /*should be picked up based on logic above for 1st 2 grid boxes*/
width: 16.66%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33%;
}
.col-md-5 {
width: 41.66%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33%;
}
.col-md-8 {
width: 66.66%;
}
.col-md-9 {
width: 74.99%;
}
.col-md-10 {
width: 83.33%;
}
.col-md-11 {
width: 91.66%;
}
.col-md-12 {      /*should be picked up on logic above for the 3rd wrapped grid component*/
width: 100%;
}
}

div.col-md-6 > div.secText {
/*Meant to mimic the spacing when in Tablet size for 1st 2 grid components*/
width: 90%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;
}

div.col-md-12 > div.secText {
/*Meant to be picked up in Tablet size for the 3rd, wrapped grid component and set
different margin width so that it aligns with the unwrapped grid components*/
width: 95%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;

}

/********** Mobile **********/
@media (max-width: 767px) {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12v
{
float: left;
/* border: 2px solid green; */
/*margin-bottom: 16px;*/
}
.col-sm-1 {
width: 8.33%;
}
.col-sm-2 {
width: 16.66%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33%;
}
.col-sm-5 {
width: 41.66%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33%;
}
.col-sm-8 {
width: 66.66%;
}
.col-sm-9 {
width: 74.99%;
}
.col-sm-10 {
width: 83.33%;
}
.col-sm-11 {
width: 91.66%;
}
.col-sm-12 {      /*should be picked up when Mobile size*/
width: 100%;
}

}

.col-sm-12 >  .secText {
/* This item gets pick up even if the brower is in any size, not sure how.
Meant to apply to all grid components when in Mobile mode and apply margin similar to
what was in place for the Desktop and tablet sizes top line*/
width: 95%;
margin-left: auto;
margin-right:auto;
margin-bottom: 16px;
}

Моя проблема заключается в том, что, хотя я могу получить формат в целом (3 по горизонтали на настольном компьютере, 2+1 на планшете и 3 по вертикали на мобильном устройстве), интервал отображается неправильно, и когда Я проверяю код и вижу, что размер Mobile (col-sm-12), похоже, существует и, следовательно, его стили применяются, даже если логика @media его не показывает:
Показывает Медиа-файл, в результате которого появился col-lg-4
Для встроенного div в div col-lg-4 вы можете видеть, что он выбрал col-md-6 как действительный
В коде, который я сделал, как в пример, показанный на этих изображениях, поскольку col-lg-4 и col-md-6 имеют одинаковые стили, он все равно работает. но когда я перехожу к размеру планшета, вы можете видеть, что последний элемент не занимает тот же интервал, что и первые два, хотя все три должны быть в col-sm-12.
показывает выбор col-md-6, когда размер маленький, поэтому поля не выровнены.
Мне не ясно, почему и как выбираются разные медиа-классы вверх и применяется, когда размеры не выровнены.
Я попробовал несколько разных подходов, чтобы исправить это:

• Я попробовал разные способы объединить кол- xx-## из элемента @media, чтобы перейти к дискретному спариванию (.col-lg-4 > .secText), где это должно обеспечить уникальное спаривание, чтобы я мог применить правильную ширину:%; для создания одинакового интервала.
• Я пытался удалить лишние теги div.
• Я пытался сделать так, чтобы .secText был идентификатором (# secText) и объединить его с классом .col-xx-##
• Я пробовал закомментировать элементы комбинаций, чтобы увидеть, не спотыкаются ли они о том, что есть, а не о том, что должно быть. доступно по запросу @media.

Подробнее здесь: https://stackoverflow.com/questions/793 ... to-the-cor