You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In several files and components throughout the app, we have mistakenly specified sizes in pixels, which has compromised the app's responsiveness. While we plan to conduct a more thorough review later to adapt our application for mobile devices, we should first address basic screen sizes.
For example, the current size settings in the root layout are:
sx={{
display: "flex",
backgroundColor: "white",
height: "100vh",
width: "100%", // Allows the container to take full width
maxWidth: "1600px", // Optional: Set a max width for larger screens
pt: { xs: 4, sm: 8, md: 16 }, // Responsive padding based on screen size
pb: { xs: 4, sm: 8, md: 12 }, // Responsive padding based on screen size
gap: { xs: 2, sm: 4, md: 16 }, // Responsive gap between elements
}}
This adjustment is not a final solution, but rather a starting point for handling responsiveness in MUI. By defining multiple sizes based on screen dimensions, MUI can automatically adapt to various devices.
Task here is to go over all the app that we currently have and change those so we have our basic responsiveness behavior back.
The text was updated successfully, but these errors were encountered:
In several files and components throughout the app, we have mistakenly specified sizes in pixels, which has compromised the app's responsiveness. While we plan to conduct a more thorough review later to adapt our application for mobile devices, we should first address basic screen sizes.
For example, the current size settings in the root layout are:
This can be adjusted to:
This adjustment is not a final solution, but rather a starting point for handling responsiveness in MUI. By defining multiple sizes based on screen dimensions, MUI can automatically adapt to various devices.
Task here is to go over all the app that we currently have and change those so we have our basic responsiveness behavior back.
The text was updated successfully, but these errors were encountered: