#Possible to hide Grid column on sm?

24 messages · Page 1 of 1 (latest)

sudden kite
#

Hi,
I am trying to accomplish this design. The image should be hidden on sm and form should take 100% width. however, the form on sm is fixed to content even though the content is a flex itself.

return (
        <Center className={classes.container}>
            <Grid gutter={25}>
                <Grid.Col md={6} style={{
                    backgroundColor: "red",
                }}>
                    <Outlet />
                </Grid.Col>
                <Grid.Col md={6}>
                    <MediaQuery smallerThan="md" styles={{
                        display: "none"
                    }}>
                        <Image
                            src={Illustration}
                        />
                    </MediaQuery>
                </Grid.Col>
            </Grid>
        </Center>
    )

any idea?

image.png image.png
high holly
#

How about

<MediaQuery
            smallerThan="md"
            styles={{
              display: "none"
            }}
          >
            <Grid.Col md={6}>
              <Image
                            src={Illustration}
                        />
            </Grid.Col>
          </MediaQuery>
sudden kite
high holly
#

Try <Grid.Col span={12} md={6}> on form grid

sudden kite
#

I did. Same result. If media query is in column, and I set display to none, the top column doesn't take up full width.

high holly
#

Well i'm not sure either then, I don't always use Grid because it always confuses me, I often use Flex component with maxWidth set and change flexDirection to column when on mobile/small screen

#

Maybe charlie could help

sudden kite
#

Does Flex works in center column? I mean I am thinking to set width to 100% and then in media query (lg): 760px or whatever.

high holly
#

Centering Flex horizontally = justifyContent: 'center'
Centering Flex vertically = alignItems: 'center'

sudden kite
#

so no <Center> component?

#

but use Flex then

high holly
#

Center will center horizontal and vertical

sudden kite
#

Thats why I wanted to use it.

#

Center with style : height: 100vh, width: 100%

#

and then a flex / grid in it

high holly
#

yes

high holly
sudden kite
#

But it restricts the width to content, check above screenshot and code

high holly
#

Your code above is using Grid though? I don't understand what you mean 😅
Have you tried this with Flex?

sudden kite
#

Not yet, I thought you wanted me to replace Center with Flex 😄

#

I will try replacing Grid with Flex now

high holly
#

Give it a try