At 400 pixels screen size, the buttons in the appBar component are spilling out

Question

At 400 pixels screen size, the buttons in the appBar component are spilling out

In my appBar component, I have three buttons that appear fine on large screens. However, when the screen size reaches 400px, they start stretching out of the appBar.

Here is how they look on large screens: https://i.sstatic.net/l3nJM.png

And this is how they appear at 400px:

https://i.sstatic.net/tZfje.png

I attempted to remove margins and paddings but it did not solve the issue.

Furthermore, there are no elements causing additional margins. What could be causing this problem?

I created a sandbox to demonstrate the issue: https://codesandbox.io/s/spring-tdd-c1ocm?file=/src/App.js

css reactjs debugging material-ui

Answer 1

Answer №1

I suggest incorporating a container element.

import Container from "@material-ui/core/Container";
. . . 
<Container>
 <Button className={classes.button}>English</Button>
 <Button className={classes.button}>Sign up</Button>
 <Button className={classes.button}>Login</Button>
</Container>

It appears to provide better organization. Do you believe this would be beneficial?

Answer 2

I suggest incorporating a container element.

import Container from "@material-ui/core/Container";
. . . 
<Container>
 <Button className={classes.button}>English</Button>
 <Button className={classes.button}>Sign up</Button>
 <Button className={classes.button}>Login</Button>
</Container>

It appears to provide better organization. Do you believe this would be beneficial?

At 400 pixels screen size, the buttons in the appBar component are spilling out

Answer №1

Similar questions

We couldn't locate the module: Execution error - Unable to locate the file './components/layouts/Navbar' in the '/opt/build/repo/src' directory

Initiate Ant Design select reset

Is there a way to save a NextJS page as a static HTML file for download?

Creating double borders in CSS with the second border extending all the way to the top of the element

What is the best way to make a DIV box span the entire webpage without overflowing to the left?

Signing out in React js

Understanding the use of `useState` within the lifecycle of a React

Move your cursor over an image to modify the z-index of another image

Page flickers when jQuery is used to scroll to an element

Sharing a boolean state between two pages using Material UI components

Managing the rendering of a functional component using React/Redux

Choose the grandparent of an element's parent

Ways to adjust Safari printing margins using CSS to achieve borderless printing

Exploring the internet using a specific font style and ensuring a

Is your React Hook experiencing a delayed useEffect firing?

What is the best way to use jQuery to update the color of an SVG shape?

Is there a way to activate a function in one component from another within a Next.js application?

Troubleshooting issue with Highcharts 3D rendering after using setState()

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

Can a create-react-app be created on a virtual private server (VPS)?