-
👋 I have a site: https://modest-snyder-8ec1eb.netlify.app/ Why is there this flash? const Home = () => {
const { colorMode } = useColorMode();
const emailButtonColor = useColorModeValue("#FFDB00", "#EB7500");
return (
<PageContainer>
<Box width={["100%", "100%", "80%", 0]}> {"<-- is it because of these?"}
<Image
width={500}
src={colorMode === "light" ? pickingFruitSVG : forestBurningSVG}
alt="Picking up fruit"
/>
</Box>
<HStack>
<Box p={[0, 0, 0, 10]}>
<Text
as="h1"
fontSize={["2xl", "2xl", "3xl", "4xl"]} {"<-- or these?"}
fontWeight="medium"
maxW={500}
pb={5}
>
...
</Text>
<Text as="h3" lineHeight={1.6}>
...
</Text>
<Box mt={10}>
<InputGroup>
<InputLeftElement children={<EmailIcon color="gray.300" />} />
<Input
type="email"
placeholder="larry@energy.com"
mb={2}
maxW={400}
/>
</InputGroup>
<Checkbox size="sm" defaultIsChecked>
...
</Checkbox>
<Box mt={5}>
<Button
bg={emailButtonColor}
style={{ padding: 30 }}
borderRadius={2}
>
Submit
</Button>
</Box>
</Box>
</Box>
<Box width={[0, 0, 0, "100%"]}>
<Image
width={1400}
src={colorMode === "dark" ? forestBurningSVG : pickingFruitSVG}
alt="Picking up fruit"
/>
</Box>
</HStack>
</PageContainer>
);
};
export default Home; |
Beta Was this translation helpful? Give feedback.
Answered by
adtm
Oct 14, 2020
Replies: 2 comments
-
Removed, but still flicks, have no clue :/ |
Beta Was this translation helpful? Give feedback.
0 replies
-
Found the cause because of the second Box in the horizonal container and the width of the image. Spend quite some time on this :D |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
adtm
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Found the cause because of the second Box in the horizonal container and the width of the image.
Sorry and thank you for being my rubber ducky!
Spend quite some time on this :D