I'm having a problem with the Chakra UI box or flex items (not sure which one is causing the problem). I can't make them take 100% width on tablets and mobiles. The only way I managed to make it work is by defining VW width but that's not responsive on all devices.
How it looks now:
how it should look:
Code (the part of code that's not working is the first ternary option):
enter code here
import React from 'react'
import { Box, Flex, useMediaQuery } from '@chakra-ui/react'
import Section from 'components/section/Section'
import HoursCellList from 'components/schedule/hours/HoursCellList'
import DaysCellList from './days/DaysCellList'
import EventsComponent from 'components/schedule/events/EventsComponent'
import MobileDaysCellList from './days/MobileDaysCellList'
import MobileEventsFlex from 'components/schedule/events/MobileEventFlex'
interface Props {}
const ScheduleComponent = (props: Props) => {
const [isSmallScreen] = useMediaQuery('(max-width: 1350px)')
const [mobileClickedDay, setMobileClickedDay] = useState<number>(0)
return (
<Section isGray heading="Schedule" id="schedule">
<Box py={['2', '4', '8']}>
{isSmallScreen ? (
<Flex justifyItems="stretch">
<Box>
<HoursCellList isMobile={isSmallScreen} />
</Box>
<Flex flexDirection="column" bg="#fff" flex="1">
<MobileDaysCellList clickedDay={mobileClickedDay} onClick={setMobileClickedDay} />
<MobileEventsFlex clickedDay={mobileClickedDay} />
</Flex>
</Flex>
) : (
<>
<HoursCellList isMobile={isSmallScreen} />
<Flex w="1200px" bg="#fff">
<DaysCellList />
<EventsComponent />
</Flex>
</>
)}
</Box>
</Section>
)
}
export default ScheduleComponent<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>All other page components are in Section component as children, and they work fine, just this one is causing the problem... Section component code:
import React from 'react'
import SectionHeading from './SectionHeading'
import { Box, Center, BoxProps } from '@chakra-ui/react'
interface Props {
heading?: string
subHeading?: string
isGray?: boolean
id?: string
children: React.ReactNode
}
type SectionProps = Props & BoxProps
const Section = ({ children, heading = '', subHeading = '', isGray = false, id = '', ...props }: SectionProps) => {
return (
<Center>
<Box
bg={isGray ? 'primaryBg' : 'secondaryBg'}
color="primaryText"
zIndex="0"
w="100%"
pt={['47px', '56px', '70px']}
pb={['12', '16', '24']}
minHeight="100vh"
d="flex"
alignItems="center"
{...props}
id={id}
>
<Box maxWidth="1366px" mx="auto" px={['15px', '43px', '83px']}>
<Box>
<SectionHeading heading={heading} subHeading={subHeading} />
{children}
</Box>
</Box>
</Box>
</Center>
)
}
export default Section<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>