Hi,
I am trying to arrange five i-phone like div elements side by side. The code displays everything fine when tested on external editors (w3 school). However, the display is weird when used in the qualtrics. The code is below. Can anyone figure out what is wrong here
------------------Code-----------------------------------
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.outer {
width : 1100px;
height : 900px;
display: inline-block;
}
.zui-table {
font: normal 15px Arial, sans-serif;
}
/* The device with borders */
.smartphone {
position: relative;
width: 180px;
height: 340px;
margin: auto;
border: 10px PaleTurquoise solid;
border-top-width: 30px;
border-bottom-width: 45px;
border-radius: 36px;
display: inline-block;
}
/* The horizontal line on the top of the device */
.smartphone:before {
content: '';
display: block;
width: 60px;
height: 5px;
position: absolute;
top: -15px;
left: 50%;
transform: translate(-50%, -50%);
background: #333;
border-radius: 10px;
}
/* The circle on the bottom of the device */
.smartphone:after {
content: '';
display: block;
width: 30px;
height: 30px;
position: absolute;
left: 50%;
bottom: -52px;
transform: translate(-50%, -50%);
background: #333;
border-radius: 50%;
}
/* The screen (or content) of the device */
.smartphone .content {
width: 180px;
height: 340px;
background: AliceBlue ;
}
</style>
</head>
<body>
<table class="Outer">
<colgroup>
<col style="width: 180px">
<col style="width: 180px">
</colgroup>
<tr>
<td>
<div class="smartphone">
<div class="content">
<table class="zui-table">
<colgroup>
<col style="width: 80px">
<col style="width: 100px">
</colgroup>
<tr>
<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_cOPspnhoNZPmy4R" alt="Car" width="60" height="60" align="center"> Car </td>
</tr>
<tr>
<td><align="left">Departure</td>
<td><center>10:20 - 10:35<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_06XO58OtYhLsn09" alt="Travel time" width="60" height="60" align="center"></td>
<td><center>20 mins<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_b8HiyqiZRSLAoM5" alt="Waiting time" width="60" height="60" align="center"></td>
<td><center>0 mins<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_bKOQYTsCkBhnnEh" alt="Cost" width="60" height="60" align="center"></td>
<td><center>5€<center></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_0TaQxx7PXxyXZPv" alt="Shared" width="60" height="60" align="center"></td>
</tr>
</table>
</div>
</div>
</td>
<td>
<div class="smartphone">
<div class="content">
<table class="zui-table">
<colgroup>
<col style="width: 80px">
<col style="width: 100px">
</colgroup>
<tr>
<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_cOPspnhoNZPmy4R" alt="Car" width="60" height="60" align="center"> Car </td>
</tr>
<tr>
<td><align="left">Departure</td>
<td><center>10:20 - 10:35<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_06XO58OtYhLsn09" alt="Travel time" width="60" height="60" align="center"></td>
<td><center>20 mins<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_b8HiyqiZRSLAoM5" alt="Waiting time" width="60" height="60" align="center"></td>
<td><center>0 mins<center></td>
</tr>
<tr>
<td><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_bKOQYTsCkBhnnEh" alt="Cost" width="60" height="60" align="center"></td>
<td><center>5€<center></td>
</tr>
<tr>
<td colspan="2" style="text-align:center;"><img src="https://tudelft.fra1.qualtrics.com/CP/Graphic.php?IM=IM_0TaQxx7PXxyXZPv" alt="Shared" width="60" height="60" align="center"></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.