Ensure material-ui grids wrap properly on larger screens

I am currently in the process of configuring a component using the Material UI grid system.

This is the code I have included in my component so far: 

  <Container maxWidth="lg" className={classes.container}>
         <Grid container spacing={4}>
          <Paper className={classes.paper}>
            <Grid item xs={12} lg={6} style={{padding: '10px'}}>
            ...
            ...
            ... (Code continues)

Here is how it looks on desktop:

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

The issue that I am facing is getting both grids to align on the same line when in desktop mode. They display correctly on smaller screens, but I'm struggling to make them wrap properly on larger screens. Any suggestions for resolving this problem?

javascriptcssreactjsgridmaterial-ui

Answer №1

I suspect the issue is arising from your utilization of a <Paper> component within your Grid container. In a <Grid> container, it's recommended that the direct child should be another <Grid> component.

One way to address this is by wrapping the <Paper> around the <Grid>. Here's an example:

<Container maxWidth="lg" className={classes.container}>
   <Paper className={classes.paper}>
     <Grid container spacing={4}>
        <Grid item xs={12} lg={6} style={{padding: '10px'}}>
        <CardActionArea component="a" href="#">
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit... (content shortened for brevity)
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.example.com/example.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </CardActionArea>
      </Grid>
      <Grid item xs={12} lg={6} style={{padding: '10px'}}>
          <Card className={classes.card}>
            <div className={classes.cardDetails}>
              <CardContent>
                <Typography component="h2" variant="h5">
                  <Title size={'28px'}>Name</Title>
                </Typography>
                <Typography variant="subtitle1" color="grey">
                  Occupation
                </Typography>
                <Typography variant="subtitle1" paragraph>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit... (content shortened for brevity)
                </Typography>
                <CardMedia 
                className={classes.media}
                title="image picture"
                image="https://www.example.com/example.jpg" /> 
              </CardContent>
            </div>
              <p>Hello</p>
          </Card>
        </Grid>
       </Grid>
      </Paper>

     </Container>

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

Utilizing Javascript or XUL windows without the use of iframes offer

I'm in the process of creating a multitab website for my bookmarks, but I've run into some issues. Here is the JavaScript version of what I'm trying to achieve: Unfortunately, there are obstacles with this method. The websites in the tabs ...

javascriptajaxiframexul

create a React component that sends a request every other second

Is there a way to continuously make fetch requests every second until the condition res.readyToShow === true in a react application? If res.status is true, then the request should stop. I need to send a request every second to check if readyToShow is true ...

node.jsreactjsfetch

Create a web application that utilizes the Graph API to develop a personalized self-service portal for the Microsoft Partner Center

I'm in the process of developing a self-service portal for Microsoft Partner Center that allows customers to log in and view their subscription/license details. They can also add managed services or licenses they need to their tenant. As a beginner w ...

reactjsexpressmicrosoft-graph-api

The navigation bar fails to display correctly on Internet Explorer 10

Encountering problems with IE 10. View the code here. While on the latest Chrome and Firefox, all text appears in a single line, IE displays it differently. Other modern browsers produce a different result altogether. ...

cssinternet-explorerinternet-explorer-10flexbox

React: Enabling the experimental syntax 'JSX' is not currently supported

After developing a node module, I encountered an issue when attempting to utilize it in a React application built using create-react-app. Upon running react-scripts start or react-scripts build, the following error surfaced: ERROR in ./node_modules/@xxx/re ...

reactjsbabeljsbabel-loader

Direct your attention solely on the input fields and buttons

Is it possible to restrict focus to specific elements, such as input fields and buttons? For example, if a user is focused on an input field and then clicks somewhere else on the page, the input field should retain focus. But if the user clicks on another ...

javascriptjquery

The createAsyncThunk function seems to be failing to trigger in the redux toolkit implementation

Currently, I am tasked with developing an application in React, and the reference application I am using as a guide is located at Below is the code snippet I have been working on in the resourceSlice.js file: import axios from 'axios'; const { c ...

javascriptreactjsreact-reduxredux-toolkit

What is the alternative to using this.$parent.$emit in Vue 3?

Recently, my application has been upgraded to Vue 3. Following the migration, my linter flagged a deprecation error that is documented at this link: . The documentation provides guidance on replacing this.$emit with the mitt library, however, it does not ...

javascriptvue.jsmigrationlintervuejs3

Material Design - The element provided is not valid: it should be a string for built-in components or a class/function for composite components, but instead it is an object

How are you today? I am currently working on a React project using Webpack and Babel. I encountered an issue when trying to incorporate Material UI components from https://mui.com/. Whenever I import a MUI component into my project, I receive the followin ...

javascriptreactjsmaterial-ui

What is the method for selectively applying a "fade to black" mask to an input field?

For my current project, I need to incorporate a design feature where a "fade to black" mask gradually appears on the left side of an input field once the text content reaches the maximum visible width of the input box. The image below provides a visual re ...

javascripthtmlcss

Displaying div attributes using console.log

Recently, I stumbled upon this div element that sparked my curiosity. While using Google Chrome, I noticed that you can inspect the element and observe its size. But how exactly can I extract this information and save it as a variable? It's likely th ...

javascripthtmlreactjsgame-development

Accessing the API to retrieve an image when the 'a' tag is clicked

Currently, I am accessing the API to retrieve an image of a specific cat breed. When the API is called for the image, you receive a JSON object with the following URL: URL: "" I aim to display this image upon clicking on that specific breed. However, I a ...

javascripthtmlarraysjsonapi

Production deployment may encounter issues as crypto/webcrypto is not defined

When working with a Next.js API route, I start by importing webcrypto like this: import { webcrypto } from 'crypto' Later on, I utilize it in the following manner: const random = webcrypto.getRandomValues(new Uint8Array(8)) While testing on loc ...

javascriptnext.jswebcrypto-api

The Nuxt JS plugin only executes when a full reload occurs, not on every page change

In my Nuxt JS 2 project, I've set up a session.js file with the following content: export default function ({ app, context }, inject) { console.log('load session') } After doing a full page reload, the console.log statement executes. Howe ...

javascriptvue.jsnuxt.js

Issue with jQuery.parseJSON causing empty data structure to return

I am facing a puzzling problem with manipulating data in JavaScript. The code snippet I am using in JavaScript is to fetch data from a PHP/MySQL source. var _response = jQuery.ajax({ url: "../data", async: false, type: "post", data: oPara ...

javascriptjqueryjson

AngularJS Data Binding Issue - Watch cycle fails to trigger

View the JSFiddle example here: https://jsfiddle.net/pmgq00fm/1/ I am trying to achieve real-time updating of my NVD3 chart by utilizing the setInterval() function on line 39, which updates the data bound to the directive. Here is a brief overview of the ...

javascriptangularjsd3.jsnvd3.js

angularjs: hide div based on text entered in textfield

Is there a way to hide a div (with the class "card") until the user inputs text into the textfield in an AngularJS application? I believe the solution involves using ng-show, but I'm unsure of how to implement this functionality. Any assistance would ...

javascripthtmlcssangularjs

Error encountered when importing React image in Webpack

Currently, I am in the process of integrating SSR using React (create-react-app) and Firebase. As part of this, I am focusing on configuring my webpack based on the guidance provided in this tutorial and referencing the GitHub repository: module.exports = ...

reactjswebpack

Color schemes for items in the Windows store app

I'm having trouble changing the background color of an item in my split application. I've tried using CSS, but nothing seems to work. Here is the template for the item (default style): <div class="itemtemplate" data-win-control="WinJS.Bindin ...

javascripthtmlcsswindows-runtimewindows-store-apps

PHP cannot render CSS properly

I recently discovered a clever technique for equally spacing divs within a container, thanks to this helpful tip: Fluid width with equally spaced DIVs I decided to test it out using static HTML and everything worked perfectly: <div class="category_are ...

phpcss