Раздел «Медиазапросы» не показывает полную ширину - PullRequest
Новая
       0

Раздел «Медиазапросы» не показывает полную ширину

0 голосов
/ 24 февраля 2020

Я пытаюсь создать этот медиазапрос, чтобы при открытии его на мобильном устройстве он имел 3 ".feature-box" один над другим на полную ширину, однако он не работает, они просто оставаться полной шириной? Есть идеи как это исправить? Код ниже

HTML

  <section>
            <div class="section-header">
                <h2>Services</h2>
                <p>I provide, clean responsive modern websites for you or your business.</p>
            </div>
                <div class="feature-box">
                    <img src="devices.svg" alt="">
                    <h3>Responsive</h3>
                    <p>Works well on any device.</p>
                </div>
                <div class="feature-box">
                    <img src="code.svg" alt="">
                    <h3>Clean Code</h3>
                    <p>Effieciently typed and easy to read.</p>
                </div>
                <div class="feature-box">
                    <img src="clock.svg" alt="">
                    <h3>Fast Loading</h3>
                    <p>Loads fast to ensure your customers stay.</p>
                </div>

        </section>

CSS

/* Site Section */
section {
  padding: 50px 0;
  margin: 0 auto;
  width: 80%; }
  section .section-header {
    text-align: center;
    margin: 0 0 30px 0; }
    section .section-header h2 {
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 300;
      color: #3F464D; }
  section .feature-box {
    display: inline-block;
    width: 33%;
    padding: 20px 30px;
    text-align: center; }
    section .feature-box img {
      width: 150px;
      margin: 0 0 12px 0;
      line-height: 1; }
    section .feature-box p {
      font-size: 1.5rem; }

Медиа-запрос 

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  .feature-box {
    width: 100%;
    display: block; } }

Ответы [ 2 ]

1 голос
/ 24 февраля 2020 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  section .feature-box {
    width: 100%;
    display: block; } }

Ваш селектор внутри медиа-запроса является проблемой. Его специфичность должна быть как минимум одинаковой, поэтому вам нужен 'section'. 

section .feature-box{ width: 33% }

более специфичен c, чем: 

.feature-box{ width: 100% }

и имеет приоритет над ним.

0 голосов
/ 24 февраля 2020

Источник: https://www.sitepoint.com/media-queries-width-vs-device-width/

Во-первых, как и для того, чтобы все веб-сайты стали адаптивными и соответствовали медиа-запросам, метатег viewport должен быть помещен в * 1007. * раздел вашей веб-страницы. Базовая c стандартная версия этого показана ниже. 

<meta name="viewport" content="width=device-width,initial-scale=1">
Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect.
...