Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've worked with CSS and HTML, so I'm feeling pretty rusty.
I've managed to get 90% of the way there, but I can't quite figure out how to align elements left within centered rows. Any suggestions? I've scoured stack overflow for solutions, but nothing seems to solve this issue. Should I ditch DIVs and start from scratch?
If you have any insights, here's a snippet of the HTML and CSS:
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height" />
<style>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background: #EEE;
font-family: "Roboto", helvetica, arial, sans-serif;
font-weight: 100;
text-rendering: optimizeLegibility;
text-align: center;
margin: 0;
padding: 0;
}
.page-header {
position: fixed;
display: table;
background-color: #1b1e24;
top: 0;
left: 0;
right: 0;
height: 5em;
width: 100%;
z-index: 100;
color: #D5DDE5;
}
/* More CSS styles... */
</style>
</head>
<body>
<div class="page-header">
<div class="header-content">Tracking Shows</div>
</div>
<div class="shows-container">
<div class="show-container">
<!-- Show details here -->
</div>
<!-- More show containers -->
</div>
</body>
</html>