I'm currently working on a design layout similar to this example. The goal is to have the image and text displayed side-by-side on desktop and tablet devices, while on mobile they should be stacked on top of each other. I'm utilizing the Horizontal Cards feature from Materialize CSS for this purpose. However, I'm facing an issue where the cards still appear horizontally on mobile. Is there a way to address this using Materialize CSS?
Below is the code I'm currently using:
<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 experimented with the codes here, but encountered issues with the image being cut off and the card layout remaining horizontal even on mobile devices.
<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>
I'm also looking for a way to align the image and text elements with similar heights on desktop and tablet screens without cropping the image. Any suggestions on how to achieve this?