How do I change the layout for smaller screens in

Question

• I am new to responsive material design.
• when I move to smaller screens, Sports Status should stay in the right corner.
• and 4Standard, 5Standard, 6Standard, 7Standard, 8Standard, 9Standard should come to next line.

• i googled and found the below line for media queries and tested color is changing, but not sure how to change the layout

  ["@media (min-width:780px)"]: {
     // eslint-disable-line no-useless-computed-key
     backgroundColor: "red"
  }
  

• is it possible to change the structure of my layout using css alone or I need to put condition in js

• can you tell me how to fix it. providing sandbox and code snippet below

small screen: https://codesandbox.io/s/material-demo-xkwyl

big screen: https://xkwyl.codesandbox.io/

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>

Answer 1

You can follow the general principle detailed in "Adaptive page layout with Media Queries" from Mathieu Nebra and Emily Reese.

@media screen and (max-width: 1280px)
{
    /* Write your CSS properties here ici */
}

For example:

The page width is currently set to 900 px and the content is centered:

#bloc_page
{
    width: 900px;
    margin: auto;
}

I suggest you add the following media query rule after these lines:

@media all and (max-width: 1024px)
{
    #bloc_page
    {
        width: auto;
    }
}

This rule means: "if the window width does not exceed 1024 px then run the following CSS rules for all screen types".

The CSS rules in question are very simple; there's actually only one rule: the page wide is adjusted automatically (rather than given a fixed width of 900 px).
The page will then take up all the available space in the window. This avoids the appearance of horizontal scrollbars with low resolutions.

If you have the right structure CSS code, you can apply a similar rule.