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

Adjust the font size to fit the size of the button when resizing a md-button

Currently utilizing md-button with text inside An issue arises in low resolution where the text gets cut off, struggling to find a suitable solution If anyone has any suggestions on how to resolve this problem, please share. I have included screenshots ...

htmlcssangularjsangular-material

The MaterialUI TextField isn't behaving as expected when attempting to change the background color

Currently, I am facing a challenge with setting the background color for my `TextField` components within the app I am developing. Despite adding custom RGB values using `style={{background: "rgb(232, 241, 250)"}}`, the component continues to dis ...

cssreactjsmaterial-uistylingcss-in-js

CSS rules for organizing the stacking order of elements in the SuperFish Menu with

I've been struggling with a z-index issue on a website I'm currently managing. It seems to stem from the z-index values in the SuperFish Menu and a specific div element. Despite my attempts to apply position:relative/absolute & z-index: 99999 dec ...

csswordpressz-indexsuperfish

Tips for automatically adjusting contentStyle based on responsive screen sizes

I am incorporating Material UI into my application Layout. In order to ensure my layout is responsive, I am utilizing import ResponsiveMixin from 'react-responsive-mixin';. The documentation for ResponsiveMixin does not provide me with React.Comp ...

reactjsmaterial-ui

The validation feature in react-hook-form seems to be malfunctioning on physical devices

I am currently using react-form-hook and material-ui components to create a registration form. The issue I am facing is that the validations work perfectly fine in desktop browsers when in mobile simulation mode, but they do not seem to work on actual mobi ...

material-uireact-hook-form

Directing traffic from one webpage to another without revealing the file path in the Routes.js configuration

Recently starting out in Reactjs and utilizing Material-UI. My inquiry is regarding transitioning between pages using a sidebar, where in Material-UI it's required to display the page in the sidebar which isn't what I desire. var dashRoutes = [ ...

javascriptreactjsmaterial-ui

Having issues with the background-image style not displaying correctly in the header of an

Trying to update the "background-image:" of a CSS class upon button click. JQuery: $(function() { $('button').on('click', function() { $('.masthead2').css('background-image', 'url("../img/whitehead ...

javascriptjqueryhtmlcss

Adding a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

javascriptjavahtmlcssjakarta-mail

Does the current protected route that I am on restrict the user from navigating back to the Home component?

I'm having trouble figuring out how to redirect the user to the Home component when they logout. The API is functioning correctly based on my tests. However, I am unsure of how to implement the logout method in the current context to successfully log ...

javascriptreactjsdebuggingreact-hooksmaterial-ui

Optimizing Safari for the Best Screen Size Experience

I seem to be encountering issues with optimizing my website. Everything appears to be working correctly in terms of widths, heights, margins, etc., on my laptop. However, when I view the site on an iMac or any other computer with a larger screen size, the ...

css

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Dynamically hiding elements within tabs using jQuery

Previously, I created a functionality for handling a single set of tabs. However, as the application has expanded, this functionality is no longer sufficient to accommodate multiple sets of tabs. The initial function looked like this: var iconTabs = func ...

javascriptjqueryhtmlcss

React-Toolbox: Attempting to horizontally align the Cards side by side

When working with React-Toolbox, I encountered an issue with aligning Card elements horizontally. I attempted using display: inline-block, which successfully separated them into three distinct cards as desired. However, they did not align next to one ano ...

cssreactjsreact-toolbox

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories. When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive. CSS: button:hover { t ...

javascriptjqueryhtmlcss

Unable to choose the div element with id ":1"

Just starting out with web development, and I have a div element with the following attributes: <div class="" id=":1" role="treeitem" aria-selected="false" aria-expanded="false" aria-level="1" aria-labelledby=":1.label" aria-setsize="10" aria-posinset= ...

jqueryhtmlcssjquery-selectorscss-selectors

Alignment of UI Divs with CSS Bootstrap and HTML

I am facing an issue with two divs in my UI. One div has a label, and the other contains a file selector. Currently, they are stacked vertically instead of being side by side. https://i.stack.imgur.com/fIz03.png How can I align these divs horizontally wit ...

htmlcss

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

The information stored in the useRef hook experiences a delay when accessed through the useImperativeHandle function

After implementing useImperativeHandle from the Input Component to transfer ref data to the Login Component, I encountered an issue where the emailInputRef data was delayed compared to the inputRef data. const Login = () => { const router = useRouter( ...

reactjsnext.jsreact-hooks

Utilize the entire width of the page by evenly dividing it into different components and considering the occurrence of maximum

I have a code where I inserted a component (product), and I want it to take up the full width of the container. If there is only one component, it should use the full width, and if there are 2 or more, they should evenly distribute across the whole width. ...

htmlcssreactjsgridbootstrap-5

Having difficulty compiling Bootstrap css with grunt

After struggling for two days and finding numerous online tutorials, I still require assistance. My goal is to add a namespace to Bootstrap so that I can use it in Salesforce without conflicting with Salesforce's stylesheet. I plan on wrapping the boo ...

csstwitter-bootstrapgruntjsless