How to change layout of Horizontal Cards in Materialize CSS on mobile?

问题

I'm trying to create a layout that's similar to this: the image and text should be side-by-side on desktop and tablet. On mobile, they should show up in one column with either the image or the text on top and the other below it. I'm using the Horizontal Cards from Materialize CSS to do this. However, on mobile, the cards still show up in a horizontal format. Is there any way to change this using Materialize CSS?

This is my current code:

  <div class="col s12 m6 l6">    
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8">
      </div>
      <div class="card-stacked">
        <div class="card-content valign-wrapper">                       
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="card-action">
          <a href="#">Sample Link</a>
        </div>
      </div>
    </div>
  </div>   
<style>
    .card-content{
        margin:0 30% 0 30px;
    }
</style>

I've also tried the codes here, but the image gets cut off and the card layout is still horizontal even on mobile.

<div class="sample">    
      <div class="row">
        <div class="col s12 m6 l6 left-image">
        </div><!-- /col s12 m6 left-image -->
        <div class="col s12 m6 l6 text-right">
          <div class="test">          
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>            
          </div><!-- /col s12 m6 icon-text -->          
        </div><!-- /col s12 m6 text-right -->
      </div><!-- /row -->    
  </div>
<style>
.sample>.row{
  display:flex;
}

.sample>.row>.col{
    align-items: center;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
}

.sample>.row>.col.left-image{
  background:url("https://images.unsplash.com/photo-1454994834218-5ffbb76c0e74?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddc4ee524eee04e325dbc73367391d8");
  background-size:cover;
  height: auto;
}  
</style>

Also, is there a way to keep the image and the text aligned or with nearly the same height on desktop and tablet, but without cutting off the image?

回答1:

There is a pull request on GitHub that implements exactly what you want. The Pull request is written in sass. This is what it compiles to:

@media only screen and (min-width: 601px) {
  .card.responsive-horizontal {
    display: flex;
  }
  .card.responsive-horizontal.small .card-image, .card.responsive-horizontal.medium .card-image, .card.responsive-horizontal.large .card-image {
    height: 100%;
    max-height: none;
    overflow: visible;
  }
  .card.responsive-horizontal.small .card-image img, .card.responsive-horizontal.medium .card-image img, .card.responsive-horizontal.large .card-image img {
    max-height: 100%;
    width: auto;
  }
  .card.responsive-horizontal .card-image {
    max-width: 50%;
  }
  .card.responsive-horizontal .card-image img {
    border-radius: 2px 0 0 2px;
    width: auto;
    max-width: 100%;
  }
  .card.responsive-horizontal .card-stacked {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .card.responsive-horizontal .card-stacked .card-content {
    flex-grow: 1;
  }
}

If you are looking for the sass version of this or you want more information, have a look at the pull request on GitHub.

来源：https://stackoverflow.com/questions/49180598/how-to-change-layout-of-horizontal-cards-in-materialize-css-on-mobile

标签

html

css

materialize

responsive