Menu icon Foundation
Responsive classes for "Card" and "Media Object" ?

Hi, I'm newbie and I've just started to use Sass version of Foundation site for my new project a week ago.
I want to know if there is a way I can transform my content layout depending on the device size as below.

Small device - Media Object
Large device - Card Layout

Right now, I've only coded for card layout like below.

<section class="cell card">
	<div class="card-image">
		<img src="assets/img/1x/user-ss-01.jpg" alt="">
	</div>
	<div class="card-section">
		<h3 class="company">Company A</h3>
		<p class="information">Some cool texts about this company.</p>
	</div>
</section>

Suppose it cannot be done by adding classes to the tags.
I'm not sure how but maybe using SCSS mixins inside media query on a custom class?

 

cardmedia objectResponsivemixinsSassscss

Hi, I'm newbie and I've just started to use Sass version of Foundation site for my new project a week ago.
I want to know if there is a way I can transform my content layout depending on the device size as below.

Small device - Media Object
Large device - Card Layout

Right now, I've only coded for card layout like below.

<section class="cell card">
	<div class="card-image">
		<img src="assets/img/1x/user-ss-01.jpg" alt="">
	</div>
	<div class="card-section">
		<h3 class="company">Company A</h3>
		<p class="information">Some cool texts about this company.</p>
	</div>
</section>

Suppose it cannot be done by adding classes to the tags.
I'm not sure how but maybe using SCSS mixins inside media query on a custom class?

 

idecchi over 1 year ago

I think getting this.
So this can be done by including SCSS mixins to a custom class I made.

HTML

<section class="myComponent">
  <div class="myComponent-section">
    <div class="image">
      <img src="assets/img/1x/user-ss-01.jpg" alt="">
    </div>
  </div>
  <div class="myComponent-section">
    <h3 class="company">Company A</h3>
    <p class="information">Some cool texts about this company.</p>
  </div>
</section>

SCSS

.myComponent{
  // Media object layout.
  @include breakpoint(small only) {
    @include media-object-container;
  }
  // Card layout.
  @include breakpoint(medium) {
    @include card-container;
  }
}

.myComponent-section {
  //  Media object layout.
  @include breakpoint(small only) {
    @include media-object-section();
  }
  // Card layout
  @include breakpoint(medium) {
    @include card-section;
    @include xy-cell(); // I haven't tested this yet tho.
  }
}

If anyone knows better method than this, I would love to learn.

Rafi Benkual over 1 year ago

Not sure this is what you want. It might be better to use the default flexbox layout of the card component and manipulate it for the screensize.

Start with a card

So on small, instead of flex-direction: column, make the card flex direction row. 

 

idecchi over 1 year ago

Hi Rafi,

That's more simple and easier.
Thank you for your advice!