Now we have the code for making the videos responsive we can now adjust the columns to take full advantage of the page. So we are going to be making the main video section wider and the other videos section into a single column of videos and adjust the size for them. Once the screen goes below 771px then they go underneath as normal.
Again you can go to my page to see the change. http://bizzssite.ning.com/videos-page
Css code to go in your design studio
@media only screen and (min-width:771px){
/* Adjust the Column Widths */
.videoDetailPage .span8{ width:80% }
.videoDetailPage-list { margin:0px }
.videoDetailPage .span6{ width:20%}
.videoDetailPage-titleList { text-align:center; font-size:1.1em }
.videoDetailPage .matrix-itemFluid { min-width: 80%;max-width:100%; float:none }
.videoDetailPage .span6 .matrix-itemFluid { width: 80%; margin: 0px auto; }
}
Replies
perfect