1

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 the Image of UI at greater than 700px width

Here is a picture at less than 600px 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

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
Ashish Maurya
  • 59
  • 2
  • 9

1 Answers1

0

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%.

Imanpal Singh
  • 1,105
  • 1
  • 12
  • 22