Columns no collapse until 480px

[mwiedmann]

Hi, I have a two column row in my layout.
I would like to have the two columns to stay next to each other until screen size is under 480px.

I tried the following CSS I found in this forum:

@media (max-width: 480px) {
.dashboard {
	float: none;
width: 100%;
display: block;
  }
}

Unfortunately it’s not working as I wish, columns collapse much earlier than 480px. However, if I replace the “480” by “1000” it’s working?

[Prasant]

Hello @mwiedmann,

Thanks for writing in!

Please add following CSS under Pro > Theme Options > CSS:

@media only screen and (max-width: 480px) {
  .dashboard {
   width: 44% !important;
   display: inline-block !important;
}
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[mwiedmann]

Thanks!
But now there are two columns even below 480px. I want two columns only until 480px.

[ruenel]

Hello @mwiedmann,

Sorry for the confusion. To get this issue resolve, please remove the given custom css first.
You will have to use this code instead:

@media(min-width: 480px) and (max-width: 979px){
    .x-column.x-1-2.dashboard {
        width: 48%;
        position: relative;
        z-index: 1;
        float: left;
        margin-right: 4%;
    }

    .x-column.x-1-2.dashboard.last, .x-column.x-1-2.dashboard:last-of-type {
        margin-right: 0;
    }
}

We would love to know if this has worked for you. Thank you.

[mwiedmann]

Awesome, thank you so much!

[nabeel]

Glad we could help.

Cheers!