メディアクエリ機能セクションに全幅が表示されない

2020-02-25 html css responsive-design

私はこのメディアクエリを作成しようとしています。モバイルデバイスで開くと、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; } }

Answers

@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 .feature-box{ width: 33% }

より具体的です:

.feature-box{ width: 100% }

そしてそれを上書きします。

出典: https : //www.sitepoint.com/media-queries-width-vs-device-width/

まず、すべてのWebサイトを応答可能にしてメディアクエリを順守させる場合と同様に、ビューポートメタタグをWebページの<head>セクションに配置する必要があります。これの基本的な標準バージョンを以下に示します。

<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.

Related