Centering on the PC page and centering on the mobile page

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>

Do you think there is any possibility that this is the reason the items are not centred?
Off-hand, three methods to get this layout, none involve floats, as floats float an element to one side which is not really conducive to centring things.
You could use css tables, in-line blocks or flex-box.
The css tables would require more mark-up and media queries to work, so this example uses in-line blocks and flex.

1 Like

Are you able to edit the “navbar navbar-inverse navbar-fixed-top headroom,” “container,” and “navbar-header” in their separate primary html documents? I’ve never done that before. I know that saves time when editing design.

Thanks, very helpful, much appreciated

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.