Create a versatile 1, 2, 3 column layout that seamlessly transitions from mobile to desktop using Flex

My vision is clear:

https://i.sstatic.net/xi7KI.png

Flex is the way to go for this, but my attempts are falling short:

.content-wrapper,
.tablet-top,
.tablet-middle,
.tablet-bottom {
  display: flex;
  justify-content: center;
}


/*tablet*/

@media (min-width: 426px) and (max-width: 767px) {
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: row;
  }
  .content-wrapper {
flex-direction: column;
  }
}


/*mobile*/

@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper,
  /* added */
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
flex-direction: column;
align-items: center;
/* added */
  }
}
<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/>
  </div>
</div>

Do we need an additional div in the HTML to show dog, cat, and mouse in a single row on desktop?

Wouldn't doing so compromise responsiveness? Furthermore, my current code seems ineffective on Tablet - it should divide the tablet-top, tablet-middle, and tablet-bottom divs into three distinct rows.

htmlcssflexbox

Answer №1

Make sure to include the comma in your CSS first line, it should be: .tablet-middle, .tablet-bottom instead of .tablet-middle .tablet-bottom.

To style the desktop version, use inline-flex,

In your media queries wrapper, add the following:

.content-wrapper{
    display:flex;
    flex-direction: column;
  }

DEMO

.content-wrapper{
  display: flex;
}

/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: column;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper{
    display:flex;
    flex-direction: column;
  }
  .tablet-top, .tablet-middle, .tablet-bottom {
    display:flex;
    flex-direction: row;
  }
}
<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog"><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140"/></div>
    <div class="cat"><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140"/></div>
  </div>
  <div class="tablet-middle">
    <div class="mouse"><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140"/></div>
    <div class="snake"><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140"/></div>
  </div> 
  <div class="tablet-bottom">
    <div class="cow"><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140"/></div>
    <div class="pig"><img
src="https://i.imgur.com/rzKcrup.png"
height="100" width="140"/></div>
  </div>
</div>

DEMO - 2

.content-wrapper{
  display:flex;
  flex-wrap: wrap;
}
.content-wrapper > span{
  width:100%;
  max-width:33%;
  flex: 0 0 33%;
}
/*mobile*/
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper > span{
    width:100%;
    max-width:100%;
    flex: 0 0 100%;
  }
}

/*tablet*/
@media (min-width: 426px) and (max-width: 767px) {
  .content-wrapper > span{
    width:100%;
    max-width:50%;
    flex: 0 0 50%;
  }
}
<div class="content-wrapper">
    <span><img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" /></span>
    <span><img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" /></span>
</div>

Answer №2

HTML:

.content-wrapper{
    margin-top: 5rem;
    margin-left: 7rem;
  }
  
  .tablet-top {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 9rem;
    grid-row-gap: 5rem;
  }
<div class="content-wrapper">
      <div class="tablet-top">
        <img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
        <img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
        <img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
        <img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
        <img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
        <img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
      </div>
    </div>

Answer №3

You've made a couple of typos (a missing comma between two classes) and forgot to close the divs around the images.

Alignment rules are also missing to center everything:

I have corrected the code based on my understanding of your desired outcome.

.content-wrapper,
.tablet-top,
.tablet-middle,/* here : , as missing */
.tablet-bottom {
  display: flex;
  justify-content: center; /* added */
}
@media (min-width: 426px) and (max-width: 767px) {
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
    flex-direction: row;
  }
  .content-wrapper {
    flex-direction: column; /* added */
}
}
@media (min-width: 0) and (max-width: 425px) {
  .content-wrapper, /* added */
  .tablet-top,
  .tablet-middle,
  .tablet-bottom {
    flex-direction: column;
    align-items: center; /* added */
}
}
@media (min-width:768px) {
  .content-wrapper {
    flex-wrap: wrap;
  }
  .content-wrapper:before,
  .content-wrapper:after {
    content: '';
    min-width: calc( 50vw - 280px);
  }
  [class^=tablet] {
    display: contents;
  }
  .tablet-middle div:nth-child(2),
  .tablet-bottom div {
    order: 2;
  }
  .content-wrapper div:nth-child(3) {
    border: solid;
  } 
   :after {
    order: 1;
  }
}
<div class="content-wrapper">
  <div class="tablet-top">
    <div class="dog">
      <img src="https://i.imgur.com/RJdUaQ0.png" height="100" width="140" />
    </div>
    <!-- close it ! -->
    <div class="cat">
      <img src="https://i.imgur.com/bHoUb1x.png" height="100" width="140" />
    </div>
    <!-- close it ! -->
  </div>
  <div class="tablet-middle">
    <div class="mouse">
      <img src="https://i.imgur.com/IqUglWY.png" height="100" width="140" />
    </div>
    <!-- close it ! -->
    <div class="snake">
      <img src="https://i.imgur.com/IHaFNSs.png" height="100" width="140" />
    </div>
    <!-- close it ! -->
  </div>
  <div class="tablet-bottom">
    <div class="cow">
      <img src="https://i.imgur.com/JTFwdZT.png" height="100" width="140" />
    </div>
    <div class="pig">
      <img src="https://i.imgur.com/rzKcrup.png" height="100" width="140" />
    </div>
    <!-- close it ! -->
  </div>
</div>

To split your three containers into two rows, you need to hide them so that your six image containers become siblings and wrap onto 2 rows. Pseudos and order can be used to allow only 3 elements on the first line (see the last media query). View demo online https://codepen.io/gc-nomade/pen/VwWaxjM

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

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

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Unlocking the Mysterious Realm of HTML

I recently stumbled upon a mysterious combination of HTML attributes: <div vanisheffect="true" blinkcolor="red" fadeopacity="0.8"> Have you ever encountered something like this? And more importantly, does it have any impact on specific browsers? Is ...

htmlbrowsercss

Updating divs automatically using Ajax without refreshing the page is not functioning as intended

I'm having trouble understanding why this isn't functioning properly. My goal is to have the data from load.php displayed in the div sample. However, if the code is updated (for example, when pulling information from a database), I want only the ...

javascriptphphtmlajaxrefresh

Arrangement of items in a grid featuring a row of three items, each with an automatic width

I'm facing challenges with achieving a specific layout: https://i.sstatic.net/a5ETh.png https://i.sstatic.net/I7fuS.png My goal is to have the left and right elements automatically adjust their width to cover all the empty space on either side of t ...

htmlcssreactjsmaterial-uigrid-layout

Creating a Drop-down Menu Item using React Material UI

I am experiencing an issue with displaying a MenuItem in my Dialog2 within my React app. Despite setting the zIndex: 1900 to a higher value than the two dialogs, the MenuItem remains hidden behind the dialogs instead of appearing at the front. Please revi ...

cssreactjsmaterial-uijss

Is there a way to merge these two IE conditional statements into a single one?

When creating a mobile-first responsive site, I am considering merging the functionalities of HTML5 Boilerplate and Mobile Boilerplate. I only have one small inquiry. Is there a way to consolidate these two IE conditional statements into a single stateme ...

htmlinternet-explorermobilehtml5boilerplate

What are the best techniques for positioning text next to images in HTML and CSS?

I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and w ...

htmlcss

Is it feasible to block indent the second line of a URL?

Is there a way to indent a second line of a URL so that it aligns perfectly with the first letter of the sentence? I attempted using <ul>, but encountered issues as it inherited small text and bullet points from the main .css file. Check out this li ...

css

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible. I've encountered two issues with my code. First, the hover selector ...

javascriptcss

Obtain the computed style by utilizing setTimeout for effective functionality

I want to retrieve the calculated style (background-color) of a span element. Here's my HTML code, consisting of two label elements, each containing an input and a span: <label> <input type="radio" name="numbers" value="01" checked/> ...

javascripthtmlcss

Unable to add to content that is generated dynamically

Upon loading the page, I noticed that the #navbarUsername field remains empty while all other scripts below it run correctly. Despite attempting to use $(document).on('ready', '#navbarUsername', function () {..., this did not resolve th ...

jqueryhtml

Eliminate repeated entries in a drop-down menu and display them with commas in between

I am working with a list that contains various language combinations: German to English German to Spanish German to Chinese German to French English to Spanish English to French English to Greek English to Portuguese Does anyone have suggestions on how ...

javascriptjqueryhtmllist

Guidelines for incorporating a table and form in PHP

I recently built a form containing an editable table within it, as shown below: <form action="file.php" id="myform" method="POST"> <input name="inp"> <div class="divclass"> <table id="mytable" name="mytable"> ...

phpjqueryhtmlformshtml-table

Exploring jQuery: Choosing all li elements starting from a specific index to the end

Is there a way to select the last item, li:eq('+(lastItemIndex)+')', and all subsequent items until the end? Check out this JSFiddle demo for an example of changing elements in li from 3 onwards. ...

javascriptjqueryhtmljquery-selectors

Transmitting data with PHP forms

I'm in a bind. Need to send form values to an Email address. Here's the HTML code: <form class="form" id="form1"> <p class="name"> <input name="name" type="text" class="valida ...

phpjqueryhtmlsendmail

Is there a way for me to insert my function into the button so that it can execute upon being clicked

<span>Create Request File for Activation</span> <input type="submit" value="Generate" class="submit" id="submit"/> I'm trying to link my function with the button above. How can I make it so that when ...

javascripthtml

Creating a Dropdown Selection Menu Dynamically with jQuery and SQL Query结果

I have a website that provides information from a database based on user-set parameters. Currently, the SQL Statement is loaded from a file to populate a dropdown menu with options. The HTML code used for this process is displayed below: while($rec = $con ...

phpjqueryhtml

Why does Node.js exclusively acknowledge absolute paths?

After creating a file named nodes and initializing it with npm init, the main js file was named main.js. Along with that, index.html and index.css were also created. To render index.html using Node.js, the following code was added to main.js: const http = ...

javascripthtmlnode.jsnpmserver

Tips for developing screen reader-friendly AJAX areas and managing updates to the DOM?

My interactive user process operates in the following manner: Users encounter a dropdown menu featuring a selection of cities. Upon picking a city, an AJAX request retrieves all buildings within that city and inserts them into a designated div (the AJAX ...

javascripthtmlaccessibilitywai-ariascreen-readers

What is the best way to format FormControl for proper spacing?

<FormControl fullWidth component="fieldset" inputRef={register({ required: true })}> <FormLabel component="legend">Format</FormLabel> <RadioGroup row aria-label="format&q ...

cssmaterial-ui