MaxxDiff formating on mobile using CSS

Hello,

Im just now getting used to using CSS to change appearance of questions/ alternatives.

So far I am being able to do what I need, using in the first list item a CSS codes similar to:

<style>

@media only screen and (max-width: 600px) {

table {

height: 50px;

text-align: left;

width: 250px;

}

}

</style>

Now, on the MaxDiff we are running, we are using tables to align the items image and text, they look like this:

<table cellpadding="2" cellspacing="0" width="100%">

<tr>

<th style="width:25%"> <img src="[%GraphicsPath()%]Item.jpg" alt="" border="0"> </th>

<td> <b>ITEM NAME</b><br /><font size="2">item description </font> </td>

</tr>

</table>

Its looking good on computers. But on mobile, due to size of text, the images very small, something they even disappears.

So I ask: Is there someway to make the list for mobile to use a different text? Our ideia is not use a table for mobile, and use Tooltip to show image only if desired. The text for item on the example above would be:

[% ToolTip("(i)", "<img src='" & GraphicsPath() & "Item.jpg'/>") %] <b>ITEM NAME</b><br /><font size="2">item description </font>

Thank you,

Victor

2 replies