Breaking 4 column row into 2 on tablet

Support
#1

Hi there,

We are updating a site at http://www.evergreen-alpineacademy.com/

There is a row with 4 flip-boxes, however they are a bit buggy on tablet.

I’d like to have these boxes break to 2x2 on tablet.

I’ve added the class four-boxes to the section they are in, and added the below code through the Customizer… It’s not working though, can you please help me work out what is wrong?

@media screen and (max-width: 767px) {
    .four-boxes .x-column {
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
   .four-boxes .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}
#2

Hi @freedomdesign,

Thanks for writing in.

First, I checked your CSS why it is not working. I will show an image below that causes your CSS below that code will not work.

The back slashes causes the problem in your CSS.

Then, if your CSS is working already, add this your code above.

@media screen and (max-width: 767px) {
    .four-boxes .x-column {
        display:inline-block;
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

Hope it helps.

Let us know how it goes.

Thanks.

#3

Hi there,

Thanks for the screenshot, but I don’t know what to do to fix this CSS?? What should it be replaced with?

#4

Hi there,

Please kindly get back to us with the URL/User/Pass of your website to check and see where the code is added which is causing some issues.

The problem with the code suggested is that you add the code while you added the unique ID instead of the unique class.

So please change the code to:

@media screen and (max-width: 767px) {
    #four-boxes .x-column {
        display:inline-block;
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
   #four-boxes .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}

Thank you.

#5

Hi,

I changed the code to suit ID not class, which is how I have this code on other sites, and changed from Class to ID on the page.

However this still isn’t working, and there are some weird display things going on. Ever since upgrading this site some time ago there have been lots of things wrong with the backend, but I can’t work out why.

I have made an admin account for you, details in secure note.

Here’s an example screen-shot:

@media screen and (max-width: 767px) {
    .four-boxes .x-column {
        display:inline-block;
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
   .four-boxes .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}

Thanks in advance - Jade

#6

Hi there,

The tablet resolution is 979px and not 767px. ANd if you wish to make it effective on tablet landscape too then the target size is 1024px. Your current CSS is only effective on a mobile device.

In summary, it should look like this


    @media screen and (max-width: 1024px) {
    .four-boxes .x-column {
        display:inline-block !important;
        margin-bottom: 1% !important;
        width: 49% !important;
        margin-right: 1% !important;
    }
}

Thanks!

1 Like
#7

Hi Rad,

The code in use was provided by support in another thread, so thanks for updating.

I have replaced:

@media screen and (max-width: 767px) {
    .four-boxes .x-column {
        margin-bottom: 1%;
        width: 49%;
        margin-right: 1%;
    }
}

@media screen and (max-width: 480px) {
   .four-boxes .x-column {
        margin-bottom: 5%;
        width: 100%;
        margin-right: 0;
    }
}

With:

@media screen and (max-width: 1024px) {
.four-boxes .x-column {
    display:inline-block !important;
    margin-bottom: 1% !important;
    width: 49% !important;
    margin-right: 1% !important;
}
}

This works great to break 2x2 on tablet, how can I then have it go 1x4 on mobile?

Thanks so much in advance!

2 Likes
#8

Hi again,

Please replace your code with the following code:

@media screen and (min-width: 481px) and (max-width: 1024px) {
  .four-boxes .x-column {
      display:inline-block !important;
      margin-bottom: 1% !important;
      width: 49% !important;
      margin-right: 1% !important;
  }
}

Hope this helps!

1 Like
#9

Perfect - you are fantastic, thank you!

1 Like
#10