Material-design-lite: Cards not responsive

[LCallaghan84]

The cards are not responsive, they dont resize, especially the media (images) inside the cards

[Garbee]

They have a hard set width (300 px iirc.) You need to apply your own width styling to the cards. We offer a grid system that can be used to help with this, or you can create your own system.

Cards have no default behavior of responsiveness. For simplicity we opted to set a hard width and allow developers to override that as-needed since there is no set right way to have responsive cards display. This keeps the core as minimal as possible while allowing developers to implement the cards easily in whichever way they need for a given task.

[LCallaghan84]

that is a bad idea, images in cards need a resize rule depending on the screen size, since there are too many screen sizes, in Materialize, the cards resize depending on the screen size.

[Garbee]

You may not always need responsive images in that way. Depending on the original size, ratio, and if you are formatting the card in other ways a general responsive image could mess the display up more. It is best to let the developer decide if it is necessary and apply that rule themselves.

This is one of the opinions that came into play in development. We can't handle every scenario for cards at the moment and undoing set rules is sometimes harder than just not setting them and letting developers decide.

[LCallaghan84]

cant you guys just add class tag to the css to make the card responsive? for example: mdl-card--responsive

this has to be added, no one is going to use MDL, a thing like this missing from one the most used components is a bad idea.

[Garbee]

I would argue against that. It doesn't follow the specification. Looking over the specification again and materialize, this is an area where materialize is focusing on one format where we are thinking into the future where we will handle multiple formats for cards.

If you look over some of the specification's images they show some cards with multiple images/media within the media area. And other configurations where the media area wouldn't benefit from some default-responsiveness (thinking towards the horizontal views with media off to the right side in a square.)

Our current implementation is following the specification as best it can. Introducing a "responsive" class would in fact mislead overall. Since it is only considering a small subset of responsive aspects. And if it weren't focusing on a subset, it would introduce a lot of extra code that would be hit-and-miss in most situations with developer expectations.

[LCallaghan84]

Huh? i did not understand a single thing, such a shame, was really hoping to use MDL, but looks like I will be sticking with Materialize instead.

because it makes no sense in not to add a responsive class, for those who do need it.

[Garbee]

What would a responsive class entail? Just making the image take full width/height? If that is all it is, why not just add in your own CSS something like:

.target-area .mdl-card__media img {
  width:100%;
  height:100%;
}

This provides you control and isn't adding in extra stuff for developers that don't need it.

I'm not sure why the framework should provide every single class for every configuration you may ever need. That will lead to a lot of bloat in each component. While cards do need improving, which I really want to do, that needs to wait for 2.x since it is breaking changes at this point.

[LCallaghan84]

yeah that does not really work, because the image does not resize when the window/screen size changes.

[Garbee]

Then this is where you should be using the <picture> element or srcset. Not sure what MDL can really do about it with a class that would work in the widest number of scenarios.

[Garbee]

I'm also not sure how that wouldn't work, that is essentially what materialize is doing.

From their CSS:

.card .card-image img {
    border-radius: 2px 2px 0 0;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
}

Just a different method to get roughly the same result.

[LCallaghan84]

please have a look here,
http://countdown.teamfreewill.net/mobile/
you will see that the card resizes when the browser resizes

[LCallaghan84]

issue has been resolved, but on a side note, is it possible to put tabs on the footer instead of the header?

[Garbee]

That is where you should use the grid system we provide. A default card responsiveness like that is pretty difficult and, once again, would vary between site-to-site. If we restructured things to be more tightly integrated, then that kind of setup could be possible. However it would still have expand-ability problems if say, you add a custom breakpoint above desktop.

Media can be handled with simple custom CSS as shown above. The cards resizing, combine with the grid system to get the best results. Or make your own responsive system if the grid doesn't fit your needs. But a class for that is asking for trouble for the project at large and doesn't fit the specification.

[Garbee]

Please direct support questions to StackOverflow and use the material-design-lite tag. This will allow the most developers to find help with their problems as well more easily and keep this tracker (and its issues) specific to core issues.

[LCallaghan84]

okay I understood that now, thanks

I looked at the MDL grid system, but I only see options for 3 cell?

is there options for 1 cell grid for full screen?

or grid style like this, 2-8-2
so the card/content is centered in the middle instead of to the sides?

[surma]

@LCallaghan84 Your use-case is definitely covered. Look at the components page and our layouts, which make extensive use of the grid.

[Garbee]

And if looking at the pages and it still isn't clicking, that kind of questions are once again for StackOverflow with the material-design-lite tag. If we keep questions like that there, it will help keep the repo going smooth and the community at large find the answers they need when they are searching for problems they have.

[ghost]

@Garbee I don't know how you have patience for someone that isn't even willing to read the basics.

:x: :o:

[LCallaghan84]

i will be sticking with materialize, their documentation is much more
understandable than

@naomik don't ever assume such things, I have read the basics.

the grid system makes no sense nor does making the cards unresponsive, and
using images as backgrounds for the cards is just ludicrous.

On Wed, Sep 30, 2015 at 1:43 PM, Naomi [email protected] wrote:

@Garbee https://github.com/Garbee I don't know how you have patience
for someone that isn't even willing to read the basics.

[image: :x:] [image: :o:]

—
Reply to this email directly or view it on GitHub
https://github.com/google/material-design-lite/issues/820#issuecomment-144352370
.

[shivasurya]

@Garbee i too had same issue and read your conversation and rectified by adding css ! thanks and learnt something from this!

[teknosains]

how to wrap Card inside ? is not aligned correctly