Hide/remove column on smaller screens-CodePudding

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?

CodePudding user response：

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>

CodePudding user response：

You can use css styles to achieve that.

Some thing like:

@media screen and (max-width: 768px) {
    .row {
        .col:first-child {
            display: none;
        }
    }
}