0

On trying to implement the Grid Layout, when i provide cell span values specific to device such as "mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-6-desktop". The layout remains the same across desktop as well as mobile device. However according to the documentations of MDC , the cell should have updated as per the device on which the content is viewed.

You can see the below mentioned code in working condition at bodana.napcraft.in

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">

<!-- Newsletter Section Begins-->
<section id="sixthSection">
  <div class="mdc-layout-grid">
    <div class="mdc-layout-grid__inner">

      <!-- Row Begins -->
      <div class="mdc-layout-grid__cell  mdc-layout-grid__cell--span-12-phone mdc-layout-grid__cell--span-6-desktop">
        <img src="/resources/images/newsletter.png" style="width: 100%" />
      </div>
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop mdc-layout-grid__cell--span-12-phone" style="padding-top: 5vh; background: #E3C5B8;">
        <center>


          <span class="secondaryTitle">THE DEW'S NEWSLETTER</span><br/><br/>
          <span class="largeText">To receive more freebies, latest news and so much more!</span></center><br/>

        <div class="mdc-layout-grid__inner">

          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <div class="mdc-text-field" style="width: 100%">
              <input class="mdc-text-field__input" id="text-field-hero-input">
              <div class="mdc-line-ripple"></div>
              <label for="text-field-hero-input" class="mdc-floating-label">Name</label>
            </div>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->

          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <div class="mdc-text-field" style="width: 100%">
              <input class="mdc-text-field__input" id="text-field-hero-input">
              <div class="mdc-line-ripple"></div>
              <label for="text-field-hero-input" class="mdc-floating-label">Email</label>
            </div>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->


          <!-- Row Begins -->
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop" style="padding-top: 2vh; background: #E3C5B8;"></div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6-desktop">
            <center><button class="mdc-button mdc-button--outlined subscribeButton">SUBSCRIBE</button></center>
          </div>
          <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop"></div>
          <!-- Row Ends -->
          </center>
        </div>
        <!-- Row Ends -->

      </div>
    </div>
</section>

I would like to understand as to why my grid isn't updating as per device.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Ruhban Shah
  • 71
  • 1
  • 6

1 Answers1

1

For the grid layout to work correctly, the following meta tag needs to be inserted in the tag:

<meta name="viewport" content="width=device-width, initial-scale=1">
Ruhban Shah
  • 71
  • 1
  • 6