- Just starting out with responsive material design.
- On smaller screens, the Sports Status needs to remain in the right corner.
- 4Standard, 5Standard, 6Standard, 7Standard, 8Standard, 9Standard should wrap to the next line.
I came across this code snippet for media queries while researching online, the color changes, but struggling with altering the layout:
["@media (min-width:780px)"]: { // eslint-disable-line no-useless-computed-key backgroundColor: "red" }Can the layout structure be changed with CSS alone or does it require JavaScript?
- Could someone provide guidance on how to resolve this? I've included a sandbox and code snippet below.
Small screen demo: https://codesandbox.io/s/material-demo-xkwyl
Large screen demo:
sportsCardHeaderItem: {
color: "black",
margin: "10",
textAlign: "left",
paddingLeft: 16,
backgroundColor: "green",
["@media (min-width:780px)"]: {
// eslint-disable-line no-useless-computed-key
backgroundColor: "red"
}
},
sportsCardHeaderItemSecond: {
margin: "10",
textAlign: "left",
paddingLeft: 24
},
sportsCardHeaderItemHeading: {
fontSize: 14,
color: "#455A64"
},
sportsCardHeaderItemHeadingValue: {
fontWeight: "bold",
fontSize: 20,
color: "#263238"
},
Below is the markup
<div
style={{ flexGrow: "0" }}
className={classes.sportsCardHeaderItemSecond}
>
<div className={classes.sportsCardHeaderItemHeading}>3Standard</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
</div>
<div
style={{ flexGrow: "0" }}
className={classes.sportsCardHeaderItemSecond}
>
<div className={classes.sportsCardHeaderItemHeading}>4Standard</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
</div>
<div
style={{ flexGrow: "0" }}
className={classes.sportsCardHeaderItemSecond}
>
<div className={classes.sportsCardHeaderItemHeading}>5Standard</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
</div>
<div
style={{ flexGrow: "0" }}
className={classes.sportsCardHeaderItemSecond}
>
<div className={classes.sportsCardHeaderItemHeading}>6Standard</div>
<div className={classes.sportsCardHeaderItemHeadingValue}>jkjkjk</div>
</div>