I searched the KB wide and far and couldn’t find a working solution to what seems like a very common problem (based on the number on support inquiries you guys have on this)…
When viewing a 4-column row on a tablet in portrait, it changes it to a single column with everything in one vertical line. This is not proper on almost all tablets in portrait mode. There is plenty of room to respond down to 2 columns. How do I do this?
Hello There,
Thanks for writing in!
To resolve your issue where in the 4 Column Row Needs to Go to 2 Columns on Tablets, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)
@media(min-width: 768px) and (max-width: 979px){
.x-column.x-1-4 {
width: 48%;
margin-right: 4%;
}
.x-column.x-1-4:nth-child(2n) {
margin-right: 0;
}
}
We would loved to know if this has work for you. Thank you.
This did not work. Has no effect at all. The 4-column row continues to respond down to 1 column on tablets.
Page in question: https://dgeve.com/10x-medical-device-conference/
See first row of Speakers. The code you gave me is applied site-wide but this is what I specifically wanted to see respond properly to 2 columns.
Hello @co50,
Thanks for updating the thread.
Rather then using auto generated class in for CSS, please add a class name to Column > Customize > Setup > Class. Here is a screencast on how to add a class name to Column.
After that update the previous code with following:
@media(min-width: 600px) and (max-width: 979px){
.screen {
width: 48% !important;
margin-right: 4%;
}
.screen:nth-child(2n) {
margin-right: 0;
}
}
Note: Screen is the class name that I have used. Please update the class name in above code as per your requirement.
Please make sure to clear cache.
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
This does not work. From a dev standpoint it doesn’t really make any sense either. You asked me to put the class in for what, just one of the columns? Why would a class to break an entire row be added to a column and not the row?
Anyway, just for what it’s worth I followed your instructions and the code does nothing in these scenarios:
Cache was cleared, I used three different browsers in private mode. Still collapses to one column on tablets.
Hi There,
The float: left attribute is removed under 980px of screen size, so we have to add the float: left to the column. Please try with this custom CSS instead:
@media(min-width: 481px) and (max-width: 979px){
.x-column.x-1-4 {
width: 48%;
margin-right: 4%;
float: left;
}
.x-column.x-1-4:nth-child(2n) {
margin-right: 0;
}
}
Let us know how it goes!
This has no effect.
Cleared cache, tested in 3 diff browsers in private mode. Triple checked existing site CSS to ensure no conflicts - none.
Hi again,
I tested the code via developer’s tool and it works fine, there could be a syntax error in Theme Options > CSS which is preventing the code to work, please check for any missing curly bracket or a syntax error so your code work, you can use the following link to validate your CSS https://jigsaw.w3.org/css-validator/#validate_by_input. In the mean time try installing the Child Theme (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57) and add the following code in your Child Theme’s style.css file:
@media (min-width: 481px) and (max-width: 979px){
.x-column.x-1-4 {
width: 48% !important;
margin-right: 4% !important;
float: left !important;
}
.x-column.x-1-4:nth-child(2n) {
margin-right: 0 !important;
}
}
Let us know how this goes!
No dice. Not only doesn’t it work, but the page doesn’t even contain the custom CSS code added.
As a last resort, I added it to the page’s own custom css rather than the theme CSS (site-wide). Now it works, so there seems to be a bug or override of some kind in your theme that blocks that CSS from taking effect when applied site-wide. Please look into this.
Unfortunately…this code messes up rows consisting of just 2 columns (3/4 + 1/4) on the same page. What is the CSS to only affect 4-column rows?
Hi,
You need to add a unique class to your row element where your 1/4 columns resides.
Then use that to target your columns.
@media (min-width: 481px) and (max-width: 979px){
.my-row .x-column.x-1-4 {
width: 48% !important;
margin-right: 4% !important;
float: left !important;
}
.my-row .x-column.x-1-4:nth-child(2n) {
margin-right: 0 !important;
}
}
That way your code will only affect that specific column.
Thanks
Sheesh, should have figured that out myself. Thanks. Works perfectly now. Curious as to why applying the CSS site-wide does not work though. 
Glad to hear it’s sorted.
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.