I am trying to hide/remove the first column if the screen size goes below around 768px.
<div fxLayout="row" fxLayoutAlign="start stretch">
<div fxLayout="column" fxLayoutAlign="start">
...
</div>
<div fxLayout="column" fxLayoutAlign="start">
...
</div>
</div>
Am I missing something that will allow this to happen from my code above?
I think you need to use the fxHide to hide the columns when you go below the threshold size. In your case, it should be fxHide.lt-sm, where lt means less than and sm means small
<div fxLayout="row" fxLayoutAlign="start stretch">
<div fxLayout="column" fxLayoutAlign="start" fxHide.lt-sm>
...
</div>
<div fxLayout="column" fxLayoutAlign="start" fxHide.lt-sm>
...
</div>
</div>
You can use css styles to achieve that.
Some thing like:
@media screen and (max-width: 768px) {
.row {
.col:first-child {
display: none;
}
}
}