1

I have a nextjs app (https://codesandbox.io/s/kind-ellis-bkobb?file=/pages/list2.js) using material-ui without any theme with a page:

import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import List from "@material-ui/core/List";

export default function List2Page() {
  return (
    <>
      <p>Paragraph text</p>
      <List>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
        <ListItem>
          Donec pretium elit id augue vulputate dignissim non eget
        </ListItem>
        <ListItemText>
          Vestibulum scelerisque facilisis libero quis congue nulla
        </ListItemText>
        <ListItem>
          <ListItemText primary="Proin ornare sapien libero, eget commodo sem laoreet sit"></ListItemText>
        </ListItem>
      </List>
    </>
  );
}

Here is a screenshot of this page made on android Chrome browser in landscape mode (looks ok):

landscape screenshot

And in portrait mode (looks crazy):

portrait screenshot

Why are the two elements much smaller than other elements in portrait mode and how to make font size consistent?

camcam
  • 2,585
  • 8
  • 49
  • 65

1 Answers1

1

The solution is to add "max-height: 999999px" to any parent element, as described here: https://stackoverflow.com/a/60044980/523972

camcam
  • 2,585
  • 8
  • 49
  • 65