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