+1For my survey, I display tables to the respondent. In desktop view they look great, but in mobile view they automatically re-align so that the table becomes a single column. I want to force the table to remain as such on mobile view, even if that would require the respondent to scroll if necessary to see everything. How could I do that? Below Please find an example of what the table looks like on a desktop vs mobile device. Thanks so much for your help!
Best answer by TomG
Hi
Add a class to your table element. For example:
<table class="abTable" ...etc...Add a media rule using the class to override the current media rule:
@media (max-width: 480px) {
.Skin .MC .SAHR .abTable td { display: table-cell; }
}
+48Hi
It’s hard to help you without seeing your table code, but you probably used a tool that designs responsive tables. Regular html tables are not responsive.
+27I’m guessing you have a CSS media rule that is applying a display:block style to <td> elements on mobile. If so, you’ll need to add a CSS rule to override that rule.
If you don’t know how to do that, post a public block preview of a block that contains the question with your table.
+1Hi
+27Hi
Add a class to your table element. For example:
<table class="abTable" ...etc...Add a media rule using the class to override the current media rule:
@media (max-width: 480px) {
.Skin .MC .SAHR .abTable td { display: table-cell; }
}
+1
+27Use the same media rule to reduce the font-size. You’ll still probably need some words to break. Use ​ after Race/ and ­ between syllables of other long words.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.