Что отличает мои запросы @media, предотвращающие применение контрольных точек?

Очень первый пост, пожалуйста, простите меня и сообщите мне, что неправильно в отношении размещения здесь, и большое спасибо.Что отличает мои запросы @media, предотвращающие применение контрольных точек?

Попытка сделать простой сайт из примера для курса Coursera «HTML, CSS, and Javascript для веб-разработчиков». Я отправлю цели и изображение, которые были предоставлены первыми, а затем мой html/css, а затем вторую версию, которая является полным беспорядком (просьба сообщить, как это сделать лучше в будущих сообщениях, если необходимо). Bootstrap или любые другие frameworks разрешены этот проект.

Попытка сделать страницу fully responsive, поскольку она уменьшена, вместо того, чтобы использовать определенные размеры пикселей для каждого размера носителя. Игнорируйте другие наиболее вероятные ошибки в размерах шрифтов и т. д. (если только вы не хотите дать мне совет на все, что я делаю неправильно, что я бы приветствовал). Основное внимание уделяется тому, чтобы «строка» из трех широких контейнеров шириной 100% опускалась до двух строк с 2 containers 100% шириной в первой строке и 1 контейнер 100 % ширины во второй строке, затем уменьшите масштаб до трех рядов с 1 контейнером на 100% в ширину. Все это более подробно описано в задачах проекта, указанных ниже.

Другая проблема, с которой я столкнулся, - это лишнее пространство на правой стороне после последнего контейнера в текущей версии, когда я не могу найти причину, поскольку у меня есть поля, равные 0, а ширина контейнера равна 100%.

Я попытался создать css grid, указав различные классы классов и ширину базы для них всех, после чего с @media измените их без изменений.

ИНСТРУКЦИЯ ПО ПРОЕКТАМ (находится в https://github.com/jhu-ep-coursera/fullstack-course4/blob/master/assignments/assignment2/Assignment-2.md)

Example Page To Create

Мой HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Assignment Solution for Module 2</title> 
    <link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/styles.css"> 
</head> 

<body> 
<h1>Our Menu</h1> 

<div id="container"> 
<!-- Chicken Container --> 
    <div id="op-1" class="menu"> 
     <div class="food-type chicken">Chicken 
     </div> 

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
    </div> 

<!-- Beef Container --> 
    <div id="op-2" class="menu"> 
     <div class="food-type beef">Beef 
     </div> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
    </div> 


<!-- Sushi Container --> 
    <div id="op-3" class="menu"> 
     <div class="food-type sushi">Sushi 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
    </div> 

</div> 
</body> 
</html>

Мой CSS

/* CSS Reset */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/*=============================================== 
My CSS Styles 
=============================================== */ 
* { 
    box-sizing: border-box; 
} 


body { 
    background: #fff; 
    box-sizing: border-box; 
    font-family: raleway; roboto; ransita; sans-serif; 
    font-size: 200%; 
    margin: 0; 
} 


h1 { 
    text-align: center; 
    font-weight: bold; 
    margin: 30px 0 50px 0; 
} 

#container { 
    width: 100%; 
    max-width: 100%; 
    margin: 0px; 
    padding: 10px; 
    /*display: flex; 
    justify-content: space-between; */ 
} 

.menu { 
    float:left; 
    width:30%; 
    margin: 10px; 
    background: grey; 
    border: 1px solid #000; 
    font-size: .75em; 
    position: relative; 
} 
/* 
div.foo { 
    background: grey; 
    border: 1px solid #000; 
    font-size: .75em; 
    position: relative; 
} 
*/ 

div.food-type { 
    text-align: center; 
    font-weight: bold; 
    padding: 10px; 
    width: 30%; 
    position: relative; 
    float: right; 
    /*left: 70%;*/ 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
} 

div.chicken { 
    background: pink; 
} 

div.beef { 
    background: red; 
    color: #fff; 
} 

div.sushi { 
    background: yellow; 
} 

p { 
    color: #fff; 
    padding: 10px; 
    font-size: .75em; 
    clear: right; 
} 

@media all (min-width: 992px) { 
    .menu {width: 33.33%;} 
} 

@media all (min-width: 768px) and (max-width: 991px) { 
    #op-1.menu #op-2.menu {width: 50%;} 
    #id-3.menu {width: 100%;} 
} 

@media all (max-width: 767px) { 
    .menu {width: 100%;} 
}

Version 2 Попытка с помощью CSS сеточного HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Assignment Solution for Module 2</title> 
    <link href="https://fonts.googleapis.com/css?family=Raleway|Roboto|Sansita" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/styles2.css"> 
</head> 
<body> 
<h1>Our Menu</h1> 
<div id="grid-container"> 
<!-- Chicken Container --> 
<div id="op-1" class="menu col-2 col-3 col-6"> 
    <div class="food-type chicken"> 
    Chicken 
    </div> 

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
</div> 

<!-- Beef Container --> 
<div id="op-2" class="menu col-2 col-3 col-6"> 
    <div class="food-type beef"> 
Beef 
    </div> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
</div> 

<!-- Sushi Container --> 
<div id="op-3" class="menu op-3 col-2 col-3 col-6"> 
<div class="food-type sushi"> 
Sushi 
</div> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
</div> 
</div> 



</body> 
</html>

CSS:

/* CSS Reset */ 

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

/*=============================================== 
My CSS Styles 
=============================================== */ 
* { 
    box-sizing: border-box; 
} 


body { 
    background: #fff; 
    box-sizing: border-box; 
    font-family: raleway; roboto; ransita; sans-serif; 
    font-size: 200%; 
    margin: 0; 
} 


h1 { 
    text-align: center; 
    font-weight: bold; 
    margin: 30px 0 50px 0; 
} 



.menu { 
    float:left; 
    width:30%; 
    margin: 0px; 
    background: grey; 
    border: 1px solid #000; 
    font-size: .75em; 
    position: relative; 
} 

div.food-type { 
    text-align: center; 
    font-weight: bold; 
    padding: 10px; 
    width: 30%; 
    position: relative; 
    float: right; 
    /*left: 70%;*/ 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
} 

div.chicken { 
    background: pink; 
} 

div.beef { 
    background: red; 
    color: #fff; 
} 

div.sushi { 
    background: yellow; 
} 

p { 
    color: #fff; 
    padding: 10px; 
    font-size: .75em; 
    clear: right; 
} 

.grid-container { 
    width: 100%; 
    max-width: 100%; 
    padding: 12px; 
} 

/* 
    .row:before, 
    .row:after { 
     content:""; 
      display: table ; 
     clear:both; 
    } 
*/ 


    [class*='col-'] { 
     float: left; 
     min-height: 1px; 
     width: 33.33%; 
     padding: 12px; 
    } 

/* 
    .col-1{ width: 16.66%; } 
    .col-2{ width: 33.33%; } 
    .col-3{ width: 50%; } 
    .col-4{ width: 66.66%; } 
    .col-5{ width: 83.33%; } 
    .col-6{ width: 100%; } */ 

@media all (min-width: 992px) { 
    .col-2 {width: 33.33%;} 
} 

@media all (min-width: 768px) and (max-width: 991px) { 
    #id-1 #id-2 .col-3 {width: 50%;} 
    #id-3 .col-6 {width: 100%;} 
} 

@media all (max-width: 767px) { 
    #id-1 #id-2 #id-3 {width: 100%;} 
}

Большое спасибо, извините за так много слов, опять же, пожалуйста, дайте мне знать, как улучшить для будущих постов.

источник

2017-02-01 timmondell

Попробуйте проверить в хромированных инспекторах. Вы ясно увидите, какое правило переопределяет ваш медиа-запрос. – mehulmpt

Я все еще очень новичок в хромовом инспекторе, однако я все проверил и вижу, какие вещи применяются и которые переопределены, я просто не могу понять, почему. – timmondell

У вас есть две проблемы в ваших медиа-запросов: отсутствует слово «и» между правилами и запятой (,) между селекторов # op-1.menu и $ op-2.menu во втором медиа-запросе.

Вот запросы СМИ исправлен

@media all and (min-width: 992px) { 
    .menu {width: 30%;} 
} 

@media all and (min-width: 768px) and (max-width: 991px) { 
    #op-1.menu, #op-2.menu {width: 47%;} 
    #op-3.menu {width: 100%;} 
} 

@media all and (max-width: 767px) { 
    .menu {width: 100%;} 
}

источник

2017-02-01 10:59:12

Я добавил правильный синтаксис со словом «все» (спасибо, что указали это!) Однако я не видел запятую в моем коде, как упоминалось. Теперь эта страница реагирует теперь на 3 контейнера в ширину и на все три сложенные ... но я все еще не имею версию среднего экрана с двумя контейнерами, охватывающими первую строку и последний контейнер во второй строке со 100% шириной. – timmondell

Вам необходимо применить одно и то же правило css к двум элементам, в этом случае вам нужно разделить эти элементы (селекторы) запятой (# op-1.menu, # op-2.menu) –

Огромное улучшение! Теперь вы делаете правильные контрольные точки, спасибо! Версия среднего размера имеет нижнюю ширину ширины 100% ширины всей ширины без маржи, как две верхние, что странно, потому что у меня есть дополнительное пространство справа от двух верхних, от которого я не могу избавиться, но нижний иметь это. Тем не менее, моя первоначальная проблема медиа-запросов, которая не функционирует должным образом, была решена с предоставленными изменениями, поэтому я попытаюсь понять это самостоятельно, прежде чем снова вытащить из вас всех. Большое спасибо, этот форум поражает и меняет жизнь. – timmondell

Если вы используете медиа-запросы с min-width, заказ от маленькой до более высокой ширины в css, в противном случае, если вы рассчитываете на max-width, вам нужно перейти с больших на маленькие экраны.

Решение: Всякий раз, когда вы используете медиа-запросы, внимательно следите за порядком в css, чтобы он каскадировал и не перезаписывал себя. Переключите порядок медиа-запросов, чтобы он переходил с малых экранов на большие, когда вы используете параметр min-width в качестве параметра.

источник

2017-02-01 10:35:54

Не написано ли в таком порядке? все средства массовой информации (мин-ширина: 992px) { \t .menu {ширина: 33,33%;}} СМИ все (мин-ширина: 768px) и (макс-ширина: 991px) { \t # op- 1.menu # op-2.menu {ширина: 50%;} \t # id-3.menu {ширина: 100%;}} все средства массовой информации (макс-ширина: 767px) { \t .menu { ширина: 100%;} } – timmondell

вы должны определить @media запросы типа как это:

@media all and (min-width: 992px) { ... }

«и» ключевое слово отсутствует после @media all

Есть некоторые моменты, есть, например, чтобы найти фактическую ширину на основе маржи 10px в левой/правой части каждого окна меню. например, когда все 3 коробки должны быть видны в больших размерах экрана, мы можем установить ширину, как:

width: calc((100% - 60px)/3); /* 60px is 3*20, (20px = 10+10 Left+Right Margins) */

Я изменил код, как:

* { 
 
    box-sizing: border-box; 
 
} 
 

 

 
body { 
 
    background: #fff; 
 
    box-sizing: border-box; 
 
    font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */ 
 
    font-size: 200%; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 30px 0 50px 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    /*display: flex; 
 
    justify-content: space-between; */ 
 
} 
 

 
.menu { 
 
    float:left; 
 
    width:30%; 
 
    margin: 10px; 
 
    background: grey; 
 
    border: 1px solid #000; 
 
    font-size: .75em; 
 
    position: relative; 
 

 
    /*box-sizing: border-box;*/ 
 
} 
 

 
/* 
 
div.foo { 
 
    background: grey; 
 
    border: 1px solid #000; 
 
    font-size: .75em; 
 
    position: relative; 
 
} 
 
*/ 
 

 
div.food-type { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    padding: 10px; 
 
    width: 40%; /* *** */ 
 
    /*position: relative;*/ 
 
    float: right; 
 
    /*left: 70%;*/ 
 
    border-bottom: 1px solid #000; 
 
    border-left: 1px solid #000; 
 
} 
 

 
div.chicken { 
 
    background: pink; 
 
} 
 

 
div.beef { 
 
    background: red; 
 
    color: #fff; 
 
} 
 

 
div.sushi { 
 
    background: yellow; 
 
} 
 

 
p { 
 
    color: #fff; 
 
    padding: 10px; 
 
    font-size: .75em; 
 
    clear: right; 
 
} 
 

 
@media all and (min-width: 992px) { /* width > 992px */ 
 
     .menu {width: calc((100% - 60px)/3); } /* 31% */ 
 
} 
 

 
@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px */ 
 
    #op-1.menu {width: calc((100% - 40px)/2);} /* 47% */ 
 
    #op-2.menu {width: calc((100% - 40px)/2);} 
 
    #op-3.menu {width: calc(100% - 20px);} 
 
} 
 

 
@media all and (max-width: 767px) { /* width < 768px */ 
 
     .menu {width: calc(100% - 20px);} 
 
}

<h1>Our Menu</h1> 
 

 
    <div id="container"> 
 
    <!-- Chicken Container --> 
 
    <div id="op-1" class="menu"> 
 
     <div class="food-type chicken"> 
 
     Chicken 
 
     </div> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
    </div> 
 

 
    <!-- Beef Container --> 
 
    <div id="op-2" class="menu"> 
 
     <div class="food-type beef"> 
 
     Beef 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
    </div> 
 

 

 
    <!-- Sushi Container --> 
 
    <div id="op-3" class="menu"> 
 
     <div class="food-type sushi"> 
 
     Sushi 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
    </div> 
 

 
    </div>

источник

2017-02-01 10:43:27

У меня ширина ширины div.food установлена на 30%, чтобы сделать коробку с заголовком пищи 1/3 размером контейнера, в котором он живет, в котором содержится параграф – timmondell

в моем коде, поля взяты i чтобы учетные записи имели одинаковый точный интервал! –

Спасибо, что показал мне новый метод! Я понятия не имею, что это за логика, поскольку я просто тестирую его, но определенно собираюсь узнать об этом.Он установил дополнительное пространство справа, но теперь большая версия не подходит для всех трех. Я предполагаю, что они немного превышают общий предел ширины, должен ли я играть с математической формулой, чтобы попытаться уменьшить их ширину, чтобы они соответствовали? – timmondell

Ни одного один из ваших медиа-запросов является синтаксически правильным.

@media all (min-width: 992px) {

Это должно быть

@media all and (min-width: 992px) {

источник

2017-02-01 10:45:31 CBroe

Это мой другой ответ, добавив, родительский DIV для элементов меню коробки и использовать его padding вместо margin для внутреннего меню окна. Основным преимуществом этого метода является то, что все размеры (33,33%, 50%, 100%) могут быть установлены на точные значения, которые нам нужны (см. @media) без использования специальных оценочных значений или формул расчета или javascript ...

body { 
 
    background: #fff; 
 
    box-sizing: border-box; 
 
    font-family: raleway, roboto, ransita, sans-serif; /* **change ; to , */ 
 
    font-size: 200%; 
 
    margin: 0; 
 
} 
 

 
h1 { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    margin: 30px 0 50px 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin: 0px; 
 
    padding: 10px; 
 
    box-sizing: border-box; /* apply it to main container */ 
 
} 
 

 
.menu { /* menu external box */ 
 
    float: left; 
 
    padding: 10px; /* instead of inner menu margin */ 
 
    width: 33.33%; /* just a default width for case we are at large screens */ 
 
    box-sizing: border-box; /* apply it to main container */ 
 
} 
 

 
.menu > div { /* menu internal box (menu-child) */ 
 
    /*float:left;*/ /* EDIT! moved to parent div */ 
 
    width:100%; /* EDIT! fill whole of parent, the size is set by parent */ 
 
    /*margin: 10px;*/ /* EDIT! set by padding of parent div */ 
 
    background: grey; 
 
    border: 1px solid #000; 
 
    font-size: .75em; 
 
} 
 

 

 
div.food-type { 
 
    text-align: center; 
 
    font-weight: bold; 
 
    padding: 10px 5px; /* padding-left & right could be less as we center title text */ 
 
    width: 40%; /* or width: auto; min-width: 33%; to ensure large titles not overflow the width size */ 
 
    float: right; 
 
    border-bottom: 1px solid #000; 
 
    border-left: 1px solid #000; 
 
} 
 

 
div.chicken { 
 
    background: pink; 
 
} 
 

 
div.beef { 
 
    background: red; 
 
    color: #fff; 
 
} 
 

 
div.sushi { 
 
    background: yellow; 
 
} 
 

 
p { 
 
    color: #fff; 
 
    padding: 10px; 
 
    font-size: .75em; 
 
    clear: right; 
 
} 
 

 

 
@media all and (min-width: 992px) { /* width > 992px */ 
 
    .menu { width:33.33%; padding:10px; float:left;} 
 
} 
 

 
@media all and (min-width: 768px) and (max-width: 991px) { /* 768px < width < 991px */ 
 
    #op-1.menu {width: 50%;} 
 
    #op-2.menu {width: 50%;} 
 
    #op-3.menu {width: 100%;} 
 
} 
 

 
@media all and (max-width: 767px) { /* width < 768px */ 
 
    .menu {width: 100%;} 
 
}

<h1>Our Menu</h1> 
 

 
    <div id="container"> 
 
    <!-- Chicken Container --> 
 

 
    <div id="op-1" class="menu"> 
 
     <div> <!-- class="menu-child" --> 
 
     <div class="food-type chicken"> 
 
      Chicken 
 
     </div> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
     </div> 
 
    </div> 
 

 
    <!-- Beef Container --> 
 
    <div id="op-2" class="menu"> 
 
     <div> <!-- class="menu-child" --> 
 
     <div class="food-type beef"> 
 
      Beef 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
     </div> 
 
    </div> 
 

 

 
    <!-- Sushi Container --> 
 
    <div id="op-3" class="menu"> 
 
     <div> <!-- class="menu-child" --> 
 
     <div class="food-type sushi"> 
 
      Sushi 
 
     </div> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> 
 
     </div> 
 

 
    </div> 
 
    </div>

источник

2017-02-04 08:06:39

, пожалуйста, проверьте этот новый ответ и ответьте –

Что отличает мои запросы @media, предотвращающие применение контрольных точек?

ответ

Смежные вопросы