Adapt a dynamic nested flexbox grid into a stacked layout optimized for mobile devices

Question

Adapt a dynamic nested flexbox grid into a stacked layout optimized for mobile devices

Utilizing the power of the CSS3 Flexible Box layout has been crucial in developing a responsive site that caters to various devices.

On desktop screens, I have successfully implemented a flexbox layout that looks like this:

body {
  text-align: center;
}

.wrapper {
  background-color: white;
  display: flex;
}

.nested-wrapper1 {
  background-color: cyan;
  width: 50%
}

.nested-wrapper2 {
  background-color: pink;
  width: 50%
}

<html>

<body>
  <div class="wrapper">
    <div class="nested-wrapper1">
      <div class="1">1</div>
    </div>
    <div class="nested-wrapper2">
      <div class="2">2</div>
      <div class="3">3</div>
    </div>
  </div>
</body>

</html>

I am now faced with the challenge of adapting this layout for mobile devices, where elements 1 and 2 should be displayed side by side, while element 3 should stack below 1 and 2. Refer to the visual representation below:

html css layout flexbox

Answer 1

Answer №1

Perhaps utilizing a flexbox could offer a solution - specifically for mobile views under 650px, by absolutely positioning the third div relative to the wrapper.

One potential concern could be the third div overflowing the wrapper. For a demonstration, refer to the sample below:

body {
  text-align: center;
}

.wrapper {
  background-color: #ddd;
  display: flex;
  position: relative;
}

.nested-wrapper1 {
  display: flex;
  width: 50%;
}

.nested-wrapper2 {
  width: 50%;
}

.nested-wrapper1>[class='1'] {
  background-color: cyan;
  padding: 1em;
  flex: 1;
}

.nested-wrapper2>[class='2'] {
  background-color: pink;
  padding: 1em;
}

.nested-wrapper2>[class='3'] {
  background: lightblue;
  padding: 1em;
}

@media screen and (max-width: 650px) {
  .nested-wrapper2>[class='2'] {
    height: 100%;
  }
  .nested-wrapper2>[class='3'] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
  }
}

<div class="wrapper">
  <div class="nested-wrapper1">
    <div class="1">
      1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </div>
  <div class="nested-wrapper2">
    <div class="2">
      2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
       2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="3">
      3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

Answer 2

Perhaps utilizing a flexbox could offer a solution - specifically for mobile views under 650px, by absolutely positioning the third div relative to the wrapper.

One potential concern could be the third div overflowing the wrapper. For a demonstration, refer to the sample below:

body {
  text-align: center;
}

.wrapper {
  background-color: #ddd;
  display: flex;
  position: relative;
}

.nested-wrapper1 {
  display: flex;
  width: 50%;
}

.nested-wrapper2 {
  width: 50%;
}

.nested-wrapper1>[class='1'] {
  background-color: cyan;
  padding: 1em;
  flex: 1;
}

.nested-wrapper2>[class='2'] {
  background-color: pink;
  padding: 1em;
}

.nested-wrapper2>[class='3'] {
  background: lightblue;
  padding: 1em;
}

@media screen and (max-width: 650px) {
  .nested-wrapper2>[class='2'] {
    height: 100%;
  }
  .nested-wrapper2>[class='3'] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
  }
}

<div class="wrapper">
  <div class="nested-wrapper1">
    <div class="1">
      1. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </div>
  <div class="nested-wrapper2">
    <div class="2">
      2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
       2. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <div class="3">
      3. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
  </div>
</div>

Answer 3

Answer №2

To achieve this effect, you can utilize the display:contents property along with a media query.

For a demonstration, check out this Codepen Demo

For more information on Display:contents, visit the MDN page

These elements do not generate a specific box on their own. Instead, they are replaced by their pseudo-box and their child boxes.

The display:contents property turns off the display of an element, causing it to have no impact on the layout. This means the element and its descendant elements will not be rendered.

Browser Support is limited. Currently, supported by Chrome 58 and FF37, but not by IE/Edge/Opera/Safari.

body {
  text-align: center;
}

.wrapper {
  background-color: white;
  display: flex;
}

.nested-wrapper1 {
  background-color: cyan;
  width: 50%
}

.nested-wrapper2 {
  background-color: pink;
  width: 50%
}

.r-2 {
  background: red;
}

.r-3 {
  background: yellow;
}

@media (max-width:600px) {
  .wrapper {
    flex-wrap: wrap;
  }
  .nested-wrapper2 {
    display: contents;
  }
  .l-1,
  .r-2 {
    flex: 0 0 50%;
  }
  .r-3 {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="nested-wrapper1">
    <div class="l-1">1</div>
  </div>
  <div class="nested-wrapper2">
    <div class="r-2">2</div>
    <div class="r-3">3</div>
  </div>
</div>

Answer 4

To achieve this effect, you can utilize the display:contents property along with a media query.

For a demonstration, check out this Codepen Demo

For more information on Display:contents, visit the MDN page

These elements do not generate a specific box on their own. Instead, they are replaced by their pseudo-box and their child boxes.

The display:contents property turns off the display of an element, causing it to have no impact on the layout. This means the element and its descendant elements will not be rendered.

Browser Support is limited. Currently, supported by Chrome 58 and FF37, but not by IE/Edge/Opera/Safari.

body {
  text-align: center;
}

.wrapper {
  background-color: white;
  display: flex;
}

.nested-wrapper1 {
  background-color: cyan;
  width: 50%
}

.nested-wrapper2 {
  background-color: pink;
  width: 50%
}

.r-2 {
  background: red;
}

.r-3 {
  background: yellow;
}

@media (max-width:600px) {
  .wrapper {
    flex-wrap: wrap;
  }
  .nested-wrapper2 {
    display: contents;
  }
  .l-1,
  .r-2 {
    flex: 0 0 50%;
  }
  .r-3 {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="nested-wrapper1">
    <div class="l-1">1</div>
  </div>
  <div class="nested-wrapper2">
    <div class="r-2">2</div>
    <div class="r-3">3</div>
  </div>
</div>

Answer 5

Answer №3

Although the original poster requested a flexbox solution, it seems challenging to achieve the desired layout using flexbox. An alternative approach could involve using floats.

The success of this approach will depend on the content and the required proportions of the elements.

body {
  margin: 0;
}
.flexo {
  height: 200px;
}
.flexo > div {
  float: left;
  width: 50%;
  height: 66.66666%;
}
.flexo > div:nth-child(1) {
  background-color: dodgerblue;
}
.flexo > div:nth-child(2) {
  background-color: deeppink;
}
.flexo > div:nth-child(3) {
  background-color: limegreen;
}
.flexo > div:nth-child(3) {
  height: 33.33333%;
  width: 100%;
}

@media ( min-width: 480px ) {

  .flexo > div:nth-child(1) {
    height: 100%;
  }
  .flexo > div:nth-child(2),
  .flexo > div:nth-child(3) {
    height: 50%;
    width: 50%;
  }  

}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

<div class="flexo cf">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Answer 6

Although the original poster requested a flexbox solution, it seems challenging to achieve the desired layout using flexbox. An alternative approach could involve using floats.

The success of this approach will depend on the content and the required proportions of the elements.

body {
  margin: 0;
}
.flexo {
  height: 200px;
}
.flexo > div {
  float: left;
  width: 50%;
  height: 66.66666%;
}
.flexo > div:nth-child(1) {
  background-color: dodgerblue;
}
.flexo > div:nth-child(2) {
  background-color: deeppink;
}
.flexo > div:nth-child(3) {
  background-color: limegreen;
}
.flexo > div:nth-child(3) {
  height: 33.33333%;
  width: 100%;
}

@media ( min-width: 480px ) {

  .flexo > div:nth-child(1) {
    height: 100%;
  }
  .flexo > div:nth-child(2),
  .flexo > div:nth-child(3) {
    height: 50%;
    width: 50%;
  }  

}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}

<div class="flexo cf">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Adapt a dynamic nested flexbox grid into a stacked layout optimized for mobile devices

Answer №1

Answer №2

Answer №3

Similar questions

What is the proper way to incorporate parentheses (either "(" or ")") on the JavaScript calculator's output screen?

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

Modifying the color of the active column

What is the best way to incorporate this PHP script into an HTML document?

The Challenge of a Chess Board that Adjusts to Different

Enhance your browsing experience with Fire-fox add-on that automatically triggers JavaScript after YouTube comments have

Perform an AJAX call from the main file after inserting data using AJAX beforehand

What is the most efficient way to send various props to multiple child components within a React parent component?

How to make background color transparent in CSS for Safari browser

The text beside the image is not aligning correctly to the top of the page

Guide to showcasing user input using a Javascript function

Python allows for the sending of HTML content in the body of an email

Having trouble retrieving the text of an element using Selenium

Drop down menus fail to appear after the screen has been resized

Error encountered when attempting to utilize a variable within an EJS template document

Tips for preventing a page from automatically scrolling to the top after submitting a form

Use JQuery to gradually decrease the opacity of divs individually

When the position of my navbar is set to fixed, it doesn't stay attached to the top of the webpage

Tips for displaying HTML elements beyond the boundaries of an iframe

javascript - Alternate text colors several times within specified color ranges