Only on mobile devices, Material-UI components spill over the screen

Update: This issue is isolated to one specific page. Other pages within the website are displaying correctly.

Recently, I developed a web page using React and Material-UI. The main components utilized are Grid and Container. While the layout appears fine on desktop screens, there seems to be a problem on mobile devices. Here is a glimpse of how it appears on the mobile screen:

https://i.sstatic.net/061Pw.png

An unnecessary space (light grey) is created, causing the pictures and cards to extend beyond the screen's maximum width. However, the header (blue) and background (light blue) retain the appropriate width (the width of the screen).

I am utilizing Grid and Container in my layout.

Below is the root component containing the cards:

<Grid
  container
  spacing={0}
  direction="row"
  justify="space-around"
  alignItems="center"
  style={{ minHeight: "20vh" }}
> ....

Additionally, there is another container that exceeds the width:

<Container maxWidth="lg" style={{ marginBottom: "5vh" }}>
  <Paper style={{ padding: 20 }}>
    <Grid
      container
      spacing={0}
      direction="column"
      justify="flex-start"
      alignItems="center"
    > ....

The header, displayed correctly, is a simple AppBar.

The overflowing image at the top is defined as follows:

<div className={classes.heroContent}>
  <Container maxWidth="md" align="center">
    <Grid
      container
      direction="column"
      justify="flex-end"
      alignItems="center"
    > ...

Additionally, the classes.heroContent includes:

 heroContent: {
    backgroundImage: `url(${grupo})`,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    padding: theme.spacing(8, 0, 8),
    minHeight: "20vh",
  }, ...

What could possibly be causing this overflow issue? Despite reviewing the documentation, I am struggling to pinpoint the bug.

javascripthtmlcssreactjsmaterial-ui

Answer №1

I managed to find the solution. After some investigation, I discovered two issues.

Issue 1:

The main problem was that the grid component serving as the root component for the cards was labeled as container instead of item.

Explanation of issue 1:

Since the cards were contained within the Grid of the parent component, there should have been an item. By assigning all Grid components with at least one nested Grid as a container, and marking all child Grid components within a Grid container—directly or indirectly—as a parent component as an item, most of the issues were resolved.

Issue 2:

The issue stemmed from the combination of media sizes within the cards and the margins, which were too extensive for the screen. To rectify this, I adjusted the units for margin and width.

Explanation of issue 2:

The current CSS for the cards is as follows:

cards: {
    margin: "5vw",
    marginBottom: "0vh",
  },
  media: {
    height: "35vh",
    width: "45vw",
  },

The problem lay in the units being used. I had set margin: '5vh', causing the margins to be calculated based on the viewport's height. This resulted in discrepancies in viewports with taller heights than widths (such as mobile devices), where a fraction of the height still remained greater than the width.

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

Access both the main collection and its sub-collection in Firebase

I have been attempting to retrieve all data related to a collection and its subCollections within my Firestore database. The structure of the database is as follows: collection|->document|->subCollection|->document|-... |->field ...

javascriptreactjsfirebasegoogle-cloud-firestore

How can you use mouseover events to display a popover and manipulate the div id?

In my scenario, I have multiple div elements and I want to display separate popover for each div. Initially, the popover is not shown on the first mouseover event but works perfectly on subsequent attempts. Below is the code snippet: $(document).read ...

javascriptjquerytwitter-bootstrappopoverbootstrap-5

Utilize external cascading style sheets (CSS) to style XML data loaded into Flash

Trying to incorporate formatted xml into a flash game has been quite challenging for me. Despite my efforts, the css styling doesn't seem to be applied properly. Below is the content of my stylesheet woorden.css: .f {color:red;} This is the str ...

cssxmlactionscript-3flash-cs5

Enhance efficiency of repetitive tasks involving accessing the Mongo database

Currently, I am developing a chat bot using MeteorJS/NodeJS, which engages with approximately 2,000 active users on a daily basis. Tracking the number of individuals who interact with the bot each day is made possible by storing their activity information ...

javascriptnode.jsmongodbperformancemeteor

Positioning the HTML form in the middle of the page

The given HTML code generates a form within a table, but despite aligning the table to the center, it remains on the left side of the webpage. <!DOCTYPE html> <html> <head> <style>input.textfill { float: right; }&l ...

htmlcssalignmentcentercss-tables

Capturing a variety of input values from a form and storing them in an array

I have a form with several input fields like this: <input type="text" name="name[]" value=""> <input type="text" name="name[]" value=""> <input type="text" name="name[]" value=""> I am attempting to submit the form and store those value ...

phphtmlsqlforms

The implementation of display flex is causing issues with the material-ui grid layout

Struggling to implement the grid system from material-ui due to an issue where grid items do not resize when resizing the browser window. The culprit seems to be a parent div with the style property "display": "flex". The dilemma arises from using a mater ...

htmlcssreactjsmaterial-ui

The transformation of href to data-href is now complete

Recently, I encountered an unusual issue in my Next JS application. I included Google Fonts using the code snippet below: <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Source+Serif+Pro:wght@300;400;500& ...

reactjsfontsnext.jshrefgoogle-webfonts

What is the best way to create an array in jQuery based on the presence of set variables?

Currently, I am working with 5 different variables in my project: var item_id var status var next_contact var email var phone_number var comment These variables are being sent to my server via a POST request enclosed in an array: data = {'item_id&a ...

javascriptjquery

Unable to carry out specific tasks in a particular order with GULP

I'm having trouble getting the TASK cssmin to execute after scss. It works fine when the folder destination is not empty and .css files are already compiled with the 'scss' task, but if the folder is empty, the cssmin task doesn't creat ...

javascriptnode.jsnpmgulp

Is there a way to ensure that the content of my modal dialog only displays once when it is opened?

While working with Chakra UI, I encountered a unique issue that I hadn't faced before with Material UI. The problem arises when using the Chakra UI modal dialog - all components inside it get rendered twice upon opening. Despite attempting to disable ...

reactjstypescriptmodal-dialogchakra-ui

What is the best way to incorporate multiple vertical axes (y) into a Google chart?

I created a line graph with 2 lines that refresh every 5 seconds. Now, I'm trying to add dual vAxis on the left and right side. However, I can't seem to display the vAxis title. How can I fix this? Here is the chart option that I added: This ...

javascriptjspchartsgoogle-visualization

Encountering issues with Node-persist on a complex Node.js application leading to missing return

I've encountered an issue with my heavy node app where I'm using node-persist to save data locally. Specifically, in a certain step of the process, I have the following code: const localdb = require('node-persist') const storage = loca ...

javascriptnode.jsasync-awaitnode-persist

I'm having trouble with the DaisyUi navbar; it's not opening the dropdown menu as smoothly as it does on the DaisyUi website when using

Currently, I am experimenting with daisy and tailwind in my project without making many changes to the JavaScript. However, I am facing an issue where it does not behave the same as on the daisyUI website. When I click on 'Parent' in my script, t ...

reactjsnext.jstailwind-cssdaisyui

MUI component with a stylish gradient border

I'm struggling to locate the alternative for the border-image-source in CSS My objective is to create a button component with a gradient border ...

cssreactjsmaterial-uijssmakestyles

Adjust the dimensions of the image carousel in Twitter Bootstrap

Here is the code that I am currently working with: <div class="col-sm-4"> <div class="card"> <div class="card-block"> <div class="col-sm-4"> <div id="carouselExampleIndi ...

htmlcsstwitter-bootstrap-3

How can you personalize a website script by deactivating it using uBlock Origin and then reintegrating it as a userscript?

Can you imagine if it were possible to address a problematic portion of a script on a website by preventing the original script from loading, copying the source code, editing it, and then re-injecting it as a userscript with Tampermonkey? I attempted this ...

javascriptuserscripts

Is it acceptable to initiate an import with a forward slash when importing from the root directory in Next.js?

I've noticed that this import works without any issues, but I couldn't find official documentation confirming its validity: // instead of using a complex nested import like this import { myUtil } from '../../../../../lib/utils' // this ...

javascriptnode.jsreactjsnext.js

Restricting the Vue for-loop results to display only the current item in use

Currently, I am utilizing a for-loop to retrieve all of my posts, followed by employing a partial to obtain a list of all the usersThatUpvoted on that post. <div v-for="p in posts" style="padding: 16px"> <div> &l ...

javascriptarraysvue.jsfor-loopdynamic

Is there a way to seamlessly integrate a PDF file into a KnockoutJS template without triggering any warnings from PDF plugins?

I am attempting to embed a PDF document in an HTML view, with the assistance of a Knockout ViewModel that supplies the URL for the document. I understand that the appropriate HTML element for this task is <object>, so my view looks like this: <di ...

htmlknockout.js