Split the nested flex container on smaller devices' screens

Question

Split the nested flex container on smaller devices' screens

Is there a way to split the main sections in each row into new lines on mobile phones using media queries, without breaking the image and text apart? I don't want to use display-direction: column; on .row-flex as it will break both the image and text. Instead, I want them to split like shown in the provided image.

https://i.sstatic.net/sZuzy.jpg

.row-flex {
  display: flex;
}
.col-1 {
  flex: 1;
}
.col-2 {
  flex: 3;
}

<div class="row-flex">

  <a href="#" class="col-1">
    <img src="http://placehold.it/90x90">
  </a>

  <div class="col-2">
    <p>text text text text text text text text</p>
  </div>


  <a href="#" class="col-1">
    <img src="http://placehold.it/90x90">
  </a>

  <div class="col-2">
    <p>text text text text text text text text</p>
  </div>

</div>

html css flexbox

Answer 1

Answer №1

If you're searching for display-direction: column, that property doesn't exist. What you actually need is flex-direction: column. Also, remember to use display:flex to wrap the elements in a row.

.row-flex {
  display: flex;
  flex-direction: column;
}
.col-1,
.col-2 {
  display: flex
}
.col-1 div {
  flex: 1;
}
.col-2 div {
  flex: 3;
}

<div class="row-flex">
  <div class="col-1">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>
  <div class="col-2">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>

</div>

Answer 2

If you're searching for display-direction: column, that property doesn't exist. What you actually need is flex-direction: column. Also, remember to use display:flex to wrap the elements in a row.

.row-flex {
  display: flex;
  flex-direction: column;
}
.col-1,
.col-2 {
  display: flex
}
.col-1 div {
  flex: 1;
}
.col-2 div {
  flex: 3;
}

<div class="row-flex">
  <div class="col-1">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>
  <div class="col-2">
    <a href="#">
      <img src="http://placehold.it/90x90">
    </a>
    <div>
      <p>text text text text text text text text</p>
    </div>
  </div>

</div>

Split the nested flex container on smaller devices' screens

Answer №1

Similar questions

php prevent unauthorized direct access to URLs

The rounded corners feature of PIE.htc does not seem to be functioning properly on Internet Explorer

Having trouble displaying my JavaScript objects in distinct columns

Toggle button for activating or deactivating a dropdown menu

Having trouble getting the CSS transition effect to work properly

The console.log and scroll event listener are not functioning properly

Using regular expressions to search for HTML tags in PHP may result in empty tags being overlooked

What causes variations in the maximum size of localStorage within the same browser?

Ensuring that text inside a float left div remains aligned with the left margin

Encircle a circle within the Progress Tracker

Tips for customizing angular-material radio buttons

Capture an image of the video frame every second

I am unable to see the last row of the table when I apply a condition after the table name

Are HTML files and PHP generated files cached differently by web browsers?

Creating alignment for text within a span element that is nested inside a p tag

What is the best method to deactivate zoom in/out buttons using JavaScript?

The radio button allows for the selection of multiple items, rather than just one at a time

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?

What is the best way to create distance between two rows?

Navigating a roster of users in JavaScript