I am developing a website where I am using component for dark mode display, but while shrinking below 600px Component getting shrunk way too much and not others.
My appjs:
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<ThemeChanger>
<Paper square elevation={0}>
<Layout>
<Component {...pageProps} />
</Layout>
</Paper>
</ThemeChanger>
</>
);
}
Here are some sample Images :
Here is the Image of UI at greater than 700px width
Here is a picture at less than 600px width
Things I already tried adding flex , min-width : "100%" at component every other component is behaving fine except component
TechStack I am using NextJS v11 Material Ui v5
Cannot find the solution with looking at the entire css.
For me it look like a parent element's size constraints are blocking the child to grow. You won't be able to make a child element take up full width if the parent element has fixed size or doesn't have 100% width.
Inspect the element on both screens and figure of what css is blocking the width 100%.