MaterializeCSS valing-wrapper responsiveness not working

Question

I am trying to align content in vertical and horizontal middle and also use materializecss columns to have 100% width when the window is on a smaller device and split equally across the window on larger devices:

<div class="row valign-wrapper">
    <div class="col s12 l6">
        A
    </div>
    <div class="col s12 l6 valign">
        B
    </div>
</div>

See JSFiddle

Unfortunately on smaller devices it just stays split inline. Rather than dropping to a new line.

Answer 1

Unfortunately on smaller devices it just stays split inline. Rather than dropping to a new line.

The reason is that the .valign-wrapper is styled using Flexbox and flex-wrap is not set. This means that .valign-wrapper {flex-wrap: nowrap;} by default flex-wrap value is nowrap , which means it will stays split inline and will cause s12 l6 grid to not work.

To solve your issue what you need to do is to set the flex-wrap of .valign-wrapper to {flex-wrap: wrap;}

---

.valign-wrapper {flex-wrap: wrap;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>

<div class="row valign-wrapper">
  <div class="col s12 l6">
     <img width="100%" src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg">
  </div>
  <div align="center" class="col s12 l6 valign">
     B
  </div>
</div>

Hope this helps