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:

And this is how they appear at 400px:

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

cssreactjsdebuggingmaterial-ui

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?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reactjs Pagination Limit

Looking for assistance with paginating data using next and prev buttons. Specifically, I want to display the first 5 (1-5) items on the initial page but unsure how to achieve this. This is the current code snippet I have: Any suggestions or improvements ...

reactjspagination

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Trouble with history.push not functioning until button click in sync or wait mode

When attempting to navigate a page without refreshing using "history.push()", I encountered an issue where it only works when clicked by a human via a button. Programmatically triggering the navigation did not work as expected, as it only updated the URL w ...

node.jsreactjsreact-router

How to style TextInput to display dollar amounts when using onChangeText and Redux in React Native

Struggling to format number input in a TextInput using the onChangeText function in React Native with Redux. Tried using .toFixed(2) function, but encountering an issue where it interprets the next digit as the first decimal and rounds back to 0 due to Re ...

javascriptreactjsreact-nativereduxformatting

Passing data to a child component using Context in React is not working

I have a parent component where I am storing data in an array of objects and then passing it to another component through Context. Here is how my parent component looks: export type HistoryData = { input: string; date: string; ...

reactjstypescriptreact-context

I attempted to craft a toggle button by applying and removing an active class that I had previously designed, but unfortunately, it did not function as intended

Every time I click on a button, I keep encountering this error message. I am certain that my selector is correct, but I can't seem to figure out why I'm getting the Uncaught TypeError: Cannot read property 'classList' of undefined at HT ...

javascripthtmlcss

Enhancing React Native experience by dynamically editing array elements

This code block defines the state of my program, including an array: this.state = { arr: [{ arrid: 0, arrEmail: '', arrName: '', arrPhone: '' }], id: 0, email: "", isChecked: true, name: "", phon ...

javascriptandroidarraysreactjsreact-native

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

After spending a considerable amount of time trying to center two buttons in Bootstrap, I came across the "text-center" class offered by Bootstrap. However, no matter where I include this class, it doesn't seem to have any effect on the alignment of t ...

javascripthtmlcsstwitter-bootstrap

Is there a way to create rectangles with a designated percentage of blue color using CSS or Bootstrap 3?

There's an image on my laptop that perfectly illustrates what I mean, but unfortunately, I'm not sure how to share it with you. In essence, I am looking to create a rectangle filled with a specific percentage of the color blue. Could you assist m ...

csstwitter-bootstrap-3

Is it possible to encase <v-img> within an anchor element?

I am currently using Vuetify 1.5 and have included a couple of <v-avatars></v-avatars> elements in which there is a nested <v-img></v-img>. I attempted to enclose the img tags within an a tag but encountered an issue wherein the ima ...

javascripthtmlcssvue.jsvuetify.js

Locate an original identifier using Selenium WebDriver

In search of a distinctive identifier for the "update profile picture button" on my Facebook account to utilize it in automation testing with Selenium WebDriver and Java. I attempted driver.findElement(By.className("_156p")).click();, but unfortunately, i ...

javacssxpathselenium-webdriver

Maintaining a consistent style input until it is modified

I'm currently dealing with this code (continuing from a previous question): input[type=submit]:focus { background-color: yellow; outline: none; } The issue I'm facing is that when I click anywhere else on the screen, the background color go ...

javascripthtmlcss

Add a focus style to the submit button input

Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused. Please review my code snippet and screenshot below. What could be causing this problem? CSS .search-form .search-f ...

htmlcssformsfocus

Is it possible to set the value in Material UI Autocomplete as a string and the options as objects?

I'm currently in the process of developing a unique custom Select component that utilizes material ui's Autocomplete as its foundation. However, I've encountered some difficulties when attempting to assign a string value to the value, simil ...

reactjsmaterial-ui

Responsive design for iPads and smartphones is essential in ensuring a seamless user

Currently in the process of creating my own personal website, I have been diligently using Chrome Canary to ensure that all my media queries are properly set up. While everything looks great on Canary and functions well in various device modes within the b ...

htmlcssiphoneipad

What is the reason for the visibility of my API key when utilizing next.js alongside environment variables?

I recently went through the next.js documentation and implemented a custom API key on my now server. However, I encountered an issue where when I execute now dev and navigate to the sources tab, my API key is visible. https://i.stack.imgur.com/kZvo9.jpg ...

javascriptreactjsapienvironment-variablesnext.js

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

Manipulating elements with JavaScript to remove them, while ensuring that the empty space is automatically filled

Recently, I decided to enhance my understanding of JavaScript by experimenting with it on various websites. My goal was to use JavaScript to remove the right bar from a webpage and have the remaining body text automatically fill in the space left behind. ...

javascripthtmlcss

The 'prop' property is not found within the 'IntrinsicAttributes & CustomComponentProps' type

I developed a custom module with an interface for props, extending props from a file called /types/SharedProps.d.ts. However, when I import this module into a sample project, the extended props are not included in the component. Below is how the module&apo ...

reactjstypescriptreact-propsreact-typescript