MUI Material-Design: Make Grid Item Disappear at Smaller Screen Widths?

Question

I have a Grid container containing two Grid items. I'd like to make the 2nd item disappear when the screen is narrow, e.g mui breakpoint 'md' size.

Why do I want to do this? I'm following the example of upwork and other sites, where the image in the hero banner disappears at smaller screen widths.

Here's my current code:

const classes = {
    splashInfoGridContainer: {
        margin: theme.spacing(1),
        display: 'flex',
        flexWrap: 'wrap',
    },

    gridContainer: {
        padding: `${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(1)} `,
        backgroundColor: '#c3f0ff',
        border: '16px solid white',
        maxWidth: '1046px',
        [theme.breakpoints.down('md')]: {
            height: '0',
        },
    },

    gridItem: {
        alignSelf: 'center',
    },

    gridElementWithHeroImage: {
        border: '0px',
        paddingTop: 'calc(100%)',
        backgroundColor: '#c3f0ff',
        position: 'relative',
    },

    heroImageContainer: {
        alignSelf: 'center',
        [theme.breakpoints.down('md')]: {
            height: '0',
            width: '0'
        },
    },
}

[.....]

<Grid container spacing={1} key="homepage-grid" sx={classes.gridContainer}>
    <Grid item xs={12} sm={8} key={"g-1"} sx={classes.gridItem}>
        <div sx={classes.splashInfoGridContainer}>
            <Typography
                variant="h4"
                component="h1"
                align="center"
                sx={classes.CTAheadline}
                gutterBottom
            >
                My call to action headline.
            </Typography>
        </div>
    </Grid>
    <Grid item xs={12} sm={4} key={"g-2"} id={"hero-image"} sx={classes.heroImageContainer}>
        <CardMedia
            component="img"
            alt="hero image"
            key={"heroImg"}
            image={heroImageURL}
        />
    </Grid>
</Grid>

I tried <Grid item xs={0} on the second image, hoping that would make it disappear:

<Grid item xs={0} sm={4} key={"g-2"} id={"hero-image"} sx={classes.heroImageContainer}>

...but that had no effect. I also tried, in the styles:

    gridContainer: {
        padding: `${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(2)} ${theme.spacing(1)} `,
        backgroundColor: '#c3f0ff',
        border: '16px solid white',
        maxWidth: '1046px',
        [theme.breakpoints.down('md')]: {
            height: '0',
        },
    },

    heroImageContainer: {
        alignSelf: 'center',
        [theme.breakpoints.down('md')]: {
            height: '0',
            width: '0'
        },
    },

...but that also didn't work.

I also tried:

{displayHeroImage && 
    <Grid item xs={12} sm={4} key={"g-2"} id={"hero-image"} sx={classes.heroImageContainer}>
        <CardMedia
            component="img"
            alt="hero image"
            key={"heroImg"}
            image={heroImageURL}
        />
    </Grid>
}

...combined with a useEffect to force a refresh when the window width changed:

function getImageDimensionTargets() {
    let displayHeroImageLocal = window.innerWidth >= 600;
    if (displayHeroImageLocal !== displayHeroImage) {
        setDisplayHeroImage(displayHeroImageLocal);
    }
}

useEffect(() => {
    getImageDimensionTargets();
    window.addEventListener("resize", getImageDimensionTargets);
    return function cleanup() {
        window.removeEventListener("resize", this.getImageDimensionTargets);
    };
}, []);

...but that worked only intermittently. I.e. as the window is resized larger and smaller, sometimes it works and sometimes it doesn't.

What's the correct way to make the 2nd Grid item disappear at smaller screen widths?

Answer 1

I fixed it by putting the styles directly on the Card component:

heroImageCardComponent:{
    [theme.breakpoints.down('sm')]: {
        display: 'none',
    },
},

[.....]

<CardMedia
    component="img"
    alt="hero image"
    key={"heroImg"}
    image={heroImageURL}
    sx={classes.heroImageCardComponent}
/>

Thanks to hpertaia for recommending display: 'none'.

Answer 2

You almost had it using classes. However, instead of setting height to 0 you'd probably be better with changing display property. I'm providing working example code below.

import React from 'react'
import {Grid, Theme} from "@mui/material";
import {makeStyles} from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => ({
    one: {
        background: 'black',
        [theme.breakpoints.down('md')]: {
            display: 'none',
        },
    },
    two: {
        background: 'green'
    }
}))


const Gridt = () => {

    const classes = useStyles();


    return <Grid container style={{width:'100%', height: 200}}>
        <Grid item  sm={6} key={"g-2"} id={"hero-image"} className={classes.one}>
        </Grid>
        <Grid item  sm={6} key={"g-2"} id={"hero-image"} className={classes.two}>
        </Grid>
    </Grid>
    }

export default Gridt