I want to try to make this into a responsive design for Desktop Tablet and Mobile Phone, Im having a tough time making the youtube video responsive - can any one please help? Thanks really appreciate it
I am thinking that i need to do some sort of media query for the CSS but im not really sure how to do that - would really appreciate it for someone could explain to me how that works as well
HTML:
.mytable {
margin-bottom: 20px;
font-family: "Helvetica", "Arial";
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.mytable td {
color: #22313F;
text-align: left;
border-radius: 0.75em;
font-weight: bold;
padding: 0.4em 2em 0.7em 1.15em;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
font-size: 0.9em;
}
.mytable tr {
-webkit-transition: background 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
#container {
margin: 1em auto;
max-width: 1500px;
padding: 0;
text-align: center;
color: #22313F;
}
#principal,
aside {
border-radius: 1em;
display: inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding: 0.65em;
text-align: center;
vertical-align: top;
width: 65%;
}
article {
background: #22313F;
border-radius: 0.5em;
min-height: 140px;
padding: 0.25em;
}
aside {
width: 30%;
}<section id="container">
<section id="principal">
<article>
<iframe width="640" height="360" src="https://www.youtube.com/embed/RUina9K2Y8g?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</article>
</section>
<aside>
<table class="mytable">
<tr>
<td></td>
<td style="background-color:#6C7A89"><font color=#FFF><font size="4">My List of Stuff</font>
</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler One</td>
</tr>
<tbody>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Two</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Three</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Four</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Five</td>
</tr>
</tr>
</tbody>
</table>
</aside>
</section>1) I've prepared working example for on JSFiddle. The video is responsive now, but I don't know how exactly you want video and table to be positioned. http://jsfiddle.net/8w2m9xdz/1/
2) I've update your code. Video is responsive. When you shrink the window, the table went underneath the video, so it should good on mobile devices, but you need to test it by yourself.
.mytable {
margin-bottom: 20px;
font-family: "Helvetica", "Arial";
border: none;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
width:100%;
}
.mytable td {
color: #22313F;
text-align: left;
border-radius: 0.75em;
font-weight: bold;
padding: 0.4em 2em 0.7em 1.15em;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
font-size: 0.9em;
}
.mytable tr {
-webkit-transition: background 0.3s, box-shadow 0.3s;
-moz-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
#container {
margin: 1em auto;
max-width: 1500px;
padding: 0;
text-align: center;
color: #22313F;
}
#principal,
aside {
border-radius: 1em;
display: inline-block;
margin: 0.25em auto;
max-width: 960px;
min-height: 200px;
padding: 0.65em;
text-align: center;
vertical-align: top;
width: 65%;
}
article {
background: #22313F;
border-radius: 0.5em;
min-height: 140px;
padding: 0.25em;
}
aside {
width: 30%;
}
/* Style that fixes your issue */
#principal article {
position: relative;
padding-bottom: 56.25%;
}
#principal article iframe {
width: 100%;
height: 100%;
position:absolute;
left: 0;
top: 0;
}
}<section id="container">
<section id="principal">
<article>
<iframe src="https://www.youtube.com/embed/RUina9K2Y8g?controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</article>
</section>
<aside>
<table class="mytable">
<tr>
<td></td>
<td style="background-color:#6C7A89"><font color=#FFF><font size="4">My List of Stuff</font>
</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler One</td>
</tr>
<tbody>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Two</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Three</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Four</td>
</tr>
<tr>
<td>
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-checkmark-outline-128.png" height="42" width="42">
</td>
<td>Filler Five</td>
</tr>
</tr>
</tbody>
</table>
</aside>
</section>