Breaking 1 row with 4 divs into 2 rows and to colums with media queries

Question

I am trying to break the following row with 4 images on screens that are equal or less than 800px: https://i.ibb.co/1RmqDN2/1row.jpg

Into 2 rows and 2 columns, So it will look something like this: https://i.ibb.co/DWJp7mM/2row.jpg

I am using media queries to try and achieve it, But I am not finding a solution. I am a coding noob and also on css and would love some help. Here is what I have tried so far:

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:25%;
                  float:left;
              }
          }

This is the closest I got:

          @media only screen and (max-width: 800px) {
              .AR_55.ob-strip-layout .ob-dynamic-rec-container /*This is the selector of each column (image and the text below it)
              {
                  width:45%;
                  float:left;
              }
          }

It breaked to 2 columns and 2 rows, But the alignment was bad and I couldn't fix it.

Any ideas? Happy to provide more info if needed. Thanks!

Could you also share (parts) of the html, so we know what we're dealing with? — Lars, May 05 '19 at 13:50

score 0 · Answer 1 · answered May 05 '19 at 13:55

0

To achieve perfect alignment, you can have these divs as columns in a table. Below links details how you can split table columns into 2 different rows for smaller screens- Split Table Row(s) for smaller screens

answered May 05 '19 at 13:55

Aditi Chakrabarti

69
8

Adam Gonzales · Answer 2 · 2019-05-05T14:35:54.630

Using your method, the following should work:

.AR_55.ob-strip-layout .ob-dynamic-rec-container {
  width: 25%;
  float: left;
}

@media only screen and (min-width: 800px) {
  .AR_55.ob-strip-layout .ob-dynamic-rec-container {
    width: 50%;
    float: left;
  }
}

I also used min-width within the media query, my preference read more about it here

Also, feel free to update your question with your code shared with us in a codepen or similar.

Breaking 1 row with 4 divs into 2 rows and to colums with media queries

2 Answers2