I’m using a template, and tried adding some text/css to center some video thumbnail images on the page(horizontally) that appear on a desktop view, and wanted to have those video thumbnails appear two by two vertically when it appears on an iphone view. What I have added here in css is probably wrong (although the video thumbnails appeared two-by-two in mobile view, the desktop view wasn’t centered). When I try to center thm for the desktop page/view, it makes the videos line up in one column vertically on the mobile view. So, any help with getting the 4 video thumbnails centered for the desktop view, so those same 4 appear two-by two in a vertical line in the mobile view, would be appreciated. Here’s my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<link rel="shortcut icon" href="assets/images/gt_favicon.png">
<link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Custom styles for our template -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen" >
<link rel="stylesheet" href="assets/css/main.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.col-1{
width: 100%;
height:auto;
margin: 0px auto;
}
.col-2{
float:left;
width: 165px;
height:auto;
margin: 0px auto 0px 5px;
overflow:hidden;
}
</style>
</head>
<body class="home">
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top headroom" >
<div class="container">
<div class="navbar-header">
<!-- Button for smallest screens -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="index.html"><img src="/images/...png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li class="active"></li>
<li></li>
<li class="dropdown">
<!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">More Pages <b class="caret"></b></a>-->
<ul class="dropdown-menu">
<li></li>
<li class="active"></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- /.navbar -->
<!-- Header -->
<header id="head">
<div class="container">
<div class="row">
<h1 class="lead"></h1>
<p class="tagline"></p>
<p></p>
</div>
</div>
</header>
<!-- /Header -->
<!-- Intro -->
<div class="container text-center">
<div class="col-1">
<div class="col-2">
<video id="vid1" poster="img/1.png" width="167" height="145" />
<source type="video/mp4" src="1video/1.mp4" /></video>
</div>
<div class="col-2">
<video id="vid2" poster="/img/2.png" width="167" height="145" >
<source type="video/mp4" src="/1video/2.mp4" />
</video>
</div>
<div class="col-2">
<video id="vid3" poster="img/3.png" width="167" height="145" >
<source type="video/mp4" src="1video/3.mp4" /></video>
</div>
<div class="col-2">
<video id="vid4" poster="img/4.png" width="167" height="145" >
<source type="video/mp4" src="/1video/4.mp4" />
</video>
</div>
</div>
</div>
<!-- /Intro-->
<footer id="footer" class="top-space">
<div class="footer1">
<div class="container">
<div class="row">
<div class="col-md-6 widget">
<h3 class="widget-title"></h3>
<div class="widget-body">
</div>
</div>
</div> <!-- /row of widgets -->
</div>
</div>
<div class="footer2">
<div class="container">
<div class="row">
<p></p>
<p class="text-right">
</p>
</div>
<div class="col-md-6 widget">
<div class="widget-body">
</div>
</div>
<div class="col-md-6 widget">
<div class="widget-body">
</div>
</div>
</div> <!-- /row of widgets -->
</div>
</div>
</footer>
<div>
<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="assets/js/headroom.min.js"></script>
<script src="assets/js/jQuery.headroom.min.js"></script>
<script src="assets/js/template.js"></script>
</body>
</html>