I'm trying to create a card element that does NOT span the entire width of the container it is in.
The Example seems to be able to do it fine
But when I attempt to use the example code, my card stretches the whole width of the page.
https://codesandbox.io/s/074zmkx0
Hi when I ran your example it also spans the entire page, but this is an easy fix. Within your Style.css you can add a css selector to change your Card component's display to be inline-block.
Style.css
/* Card component */
#root > div > div {
display: inline-block;
}
if you want to apply the inline-block solution, a clean way is to wrap the card inside a box
<Box display="inline-block">
<Card...
</Box>
Use sizing:
import { sizing } from '@material-ui/system';
card :{
width:"50%"
}
For more information: https://material-ui.com/system/sizing/