Stop using Flexbox in Material UI on small screens

How can I prevent Flexbox from functioning on small screens using Material UI? I am looking for something similar to the d-md-flex class in Bootstrap but for Material UI.

In Bootstrap (works as expected)

<div class="d-md-flex align-items-md-center">
    <div>Content #1</div>
    <div>Content #2</div>
</div>

In React:

<Box container display="flex">
    <Box item>Content #1</Box>
    <Box item>Content #2</Box>
</Box>

The elements should be close together on large screens and stack vertically on small screens.

I would greatly appreciate any suggestions or advice. Thank you!

cssreactjsflexboxmaterial-ui

Answer №1

It seems like you are looking to achieve your goal using media queries. Here is an example of how you can do that:

import { useTheme } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';

const customComponent = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  return (
    <Container maxWidth="md">
      <Box container display={isMobile ? 'block' : 'flex'}>
        <Box item>Content #1</Box>
        <Box item>Content #2</Box>
      </Box>
    </Container>
  );
};

Answer №2

We appreciate your response. Unfortunately, achieving the desired appearance of closely positioned columns is not feasible using Grid layout due to column size constraints. Our goal is to replicate this effect while utilizing the Box element, which helps maintain proximity among child elements. Thank you for sharing your insights.

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

AJAX - Implementing a delay in displaying AJAX results

My search function uses AJAX to retrieve data from the web-server, and I am trying to implement a fade-in animation for each search result. I want the results to load and fade in one by one with a slight delay between them. Currently, it seems like all th ...

javascriptjqueryhtmlcssajax

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks. TypeError: promise.catch i ...

htmlcssangularjsangular-ui-router

Interactive calendar feature displaying events upon hovering over a date

I need some assistance with displaying a drop-down list on full calendar events when hovering over the events. Can someone provide guidance? Here is a glimpse of what I currently have: I've attempted setting the z-index, but I can't seem to get ...

javascriptcssfullcalendarfullcalendar-3

Rendering sibling components on Multiple Select Material UI in React

Here is my current challenge: I am trying to implement a multiple select feature with checkboxes in React using Material UI. The desired outcome should resemble the image linked below: https://i.stack.imgur.com/TJl8L.png I have structured my data in an a ...

javascriptreactjsmaterial-ui

The conditional statement to check for an empty object does not trigger any actions

My goal is to display a success message once users successfully register without any errors. I have an errors reducer object in Redux that stores errors sent from the backend. The logic is set up so that if the errors object is empty, it shows the success ...

javascriptreactjsredux

TypeScript is throwing an error about a missing property, even though it has been defined

Within the PianoMK1Props component, there is a prop known as recording which accepts an object with specific properties. The structure of this object is defined like so(the state variable): const [recording, setRecording] = useState({ mode: "REC ...

reactjstypescript

When utilizing the tab key on Chrome, the iFrame fails to scroll

We are currently facing an issue with our web application that is embedded inside an iFrame. On one of our HTML pages, there are numerous textboxes with a large amount of content, requiring users to scroll down to navigate through it all. When using the ...

javascriptjqueryhtmlcssiframe

Ensuring that the initial column of a table remains in place while scrolling horizontally

Thank you for taking the time to read this. I am currently working on a table within a div container (div0) where the data is dynamically generated, resulting in a table with unpredictable height and width. The outer div allows for both vertical and horizo ...

javascriptjquerycsshtml

The UseEffect function ceases to function properly upon refreshing the website

I'm currently using ReactJS for a project. I have a form that is intended to serve as the configuration for another form. The structure of this specific form is as follows: const [startingDate, setStartingDate] = useState(); const [endingDate, set ...

javascriptreactjsuse-effect

Issues arise when attempting to use TailwindCSS animations in combination with the dark variant

I'm attempting to create a straightforward dark mode button that slides upon clicking it. Oddly, the dark: option is not working for me, but utilizing conditions in my class does. Is there a method to make it function with dark: without needing cond ...

reactjstailwind-css

HTML5 input placeholder adapts its size and position dynamically as data is being

During my interaction with the input fields on my bank's website, I noticed that the placeholder text undergoes a unique transformation. It shrinks in size and moves to the upper-left corner of the input field while I am entering information. Unlike t ...

javascriptjquerycsshtml

Ways to retrieve the image URL from a div element?

How can I use PHP to extract the background image URL from a div? Specifically, I need to search for a specific class within the string and then extract the background-image URL. For instance: <div class="single-post-image" style="backgr ...

phpcssurlstring-parsing

Remove the color options from the Material UI theme

Can certain color types be excluded from the MUI palette in MUI v5? For example, can background and error colors be removed, allowing only colors defined in a custom theme file to be used? I attempted using 'never' but it did not provide a solut ...

javascripttypescriptmaterial-ui

The wonders of CSS flexbox and the power of justify-content

I am working on a layout where I need three flex items (rows) in a flex container, and my requirement is to justify them as space-between... The first row will consist of cloud tags, the second will have a price, and the third will contain a Read more link ...

cssflexbox

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

csshtml

Issue "Value of type '{}' cannot be assigned to parameter of type 'T | (() => T)'" encountered within a React component containing a type parameter

Currently, I am attempting to achieve the following: function SomeComponent<T>({ children }: PropsType) { const [configuration, setConfiguration] = useState<T>({}) } However, I am encountering this issue: The argument of type '{}&apos ...

reactjstypescript

Prevent users from downloading images

I'm trying to prevent image downloads by regular users, like so: <div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; "> <img src="wtrmrk.jpg" style=" opacity: 0; " /> </div> If the img.jpg s ...

htmlcss

What are some effective ways to ensure the footer stays at the bottom of the page

I managed to successfully position the footer at the bottom of the page, but I noticed that when I resize the screen to fit a phone, especially when there is scrolling on the page, the footer moves up! <footer className="footerContainer"> &l ...

htmlcsssass

"Utilizing JQuery to enhance task management by implementing a delete function

I need help figuring out how to create a function that can delete tasks from my todo list. Currently, each task has its own remove button, but I want to implement a single remove button at the bottom that removes checked or crossed out tasks. Any suggestio ...

javascriptjqueryhtmlcss

Differences in coverage thresholds between global settings and individual file settings when a single file is modified within

Currently, I am utilizing jest to test my react components and HUSKY for pre-commit checks. In my jest.config.js file, I have defined a global threshold coverage as follows: coverageThreshold: { global: { branches: 80, functions: 80, ...

reactjsreact-reduxjestjs