Search code examples
cssmobileflexbox

CSS flexbox not working when switching to mobile view

I'm learning to use css with mobile responsiveness and got to a sticking point. I have some content that I am using flexbox on and everything seems to be working correctly on the desktop view, but isn't working the way I want it to in the mobile view.

Here is a screenshot of the desktop view: enter image description here

And the css for it:

const useStyles = makeStyles((theme) => {
  return ({
    home: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
    },
    appName: {
      margin: '3rem 0 3rem 0',
      fontSize: '3rem',
    },
    appDescription: {
      fontSize: '1.5rem',
    },
    instructions: {
      margin: '1rem',
    },
    potd: {
      marginTop: '3rem',
      textDecoration: 'underline'
    },

Here is a screenshot of the mobile view: enter image description here

and the css for that:

[theme.breakpoints.down('sm')]: {
      home: {
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column',
      },
      appName: {
        fontSize: '1.5rem',
        margin: '2rem 0 2rem 0',
      },
      appDescription: {
        fontSize: '1.5rem',
      },
      instructions: {
        margin: '1rem',
      },
      potd: {
        marginTop: '3rem',
        textDecoration: 'underline'
      },

Here is also the html layout:

<div className={classes.home} >
        <h1 className={classes.appName} >International Space Station Tracker</h1>
        <p className={classes.appDescription} >Follow the ISS on its journey around the globe. 
          Get real time data on it's current location and the astronauts on board.
        </p>
        <p className={classes.instructions} >- Open the menu and select ISS Map -</p>
        <h2 className={classes.potd} >NASA Photo of the Day</h2>
</div>

So the flexbox works in the desktop view and centers all the content, but when I switch to mobile the first two items (appName and appDescription) are not centered. The other two (instructiond and potd) are centered though? Can someone explain why this is and how I can fix it?

Solution

  • Your align is only for the Items in the Flex Container. It means that you align the Items not the Content. Your Desktop Version looks good because the text is not so long to break on the outside.

    You can use the property text-align:center or if you want to stay in Flex you can use justify-content:center