so I am trying to make my three column layout centered when the viewport is above 1200px, but I can't get it to work.
Thank you so much for your help!
Here is my code (I included only the main css and main html file):
/*****UNIVERSAL SELECTORS*****/
body {
margin: 0;
padding: 0;
background: linear-gradient(
rgba(15,36,0,.5),
rgba(15,36,0,.5)
),
url(img/background.jpg) no-repeat center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
/*****HEADER SELECTORS*****/
header a img {
width: 100px;
margin: 10px;
}
header nav {
display: inline-block;
float: right;
}
header nav ul {
margin-top: 30px;
z-index: 100;
}
header nav ul li {
display: inline;
padding: 15px;
color: #b3de81;
font-family: 'Lato', sans-serif;
}
header nav ul li a {
padding: 15px;
}
#menu-icon {
margin-top: 30%;
height: 40px;
width: 40px;
display: hidden;
background: url(img/hamburger.png);
}
#menu-icon:hover {
border-radius: 20%;
}
/********** SLIDER **********/
.slider {
max-width: 940px;
margin: 0px auto 30px auto;}
.slide-viewer {
position: relative; /* needed for IE7 */
overflow: hidden;
height: 430px;
padding: 5px;
}
.slide-group {
width: 100%;
height: 100%;
position: relative;
}
.slide {
width: 100%;
height: 100%;
display: none;
position: absolute;
box-shadow: inset 5px 5px 100px black,
inset -5px -5px 100px black;
}
.slide-1 {
background: url(img/slide-1.jpg);
background-size: cover;
}
.slide-2 {
background: url(img/slide-2.jpg);
background-size: cover;
}
.slide-3 {
background: url(img/slide-3.jpg);
background-size: cover;
}
.slide-4 {
background: url(img/slide-4.jpg);
background-size: cover;
}
.slide:first-child {
display: block;
}
/********** BUTTONS **********/
.slide-buttons {
text-align: center;}
.slide-btn {
border: none;
background: none;
color: #000;
font-size: 200%;
line-height: 0.5em;}
.slide-btn.active, .slide-btn:hover {
color: #ed8e6c;
cursor: pointer;}
/*****BODY*****/
section:nth-of-type(1) {
background-color: #fdffff;
}
h1:nth-of-type(1) {
background-color: #fdffff;
margin: 0;
text-align: center;
padding: 30px;
font-family: 'Lato', sans-serif;
color: #004040;
}
.bwrapper {
width: 70%;
margin: 50px auto 50px auto;
background-color: #fdffff;
font-family: 'Lato', sans-serif;
box-shadow: .1px .1px 2px #b3de81,
-.1px -.1px 2px #b3de81;
}
.hwrapper {
width: 100%;
}
.twrapper {
width: 100%;
margin: auto;
text-align: center;
}
.col {
margin: 5%;
}
/*****MEDIA QUERIES*****/
@media only screen and (min-width: 1200px) {
.twrapper {
overflow: auto;
margin: 0;
position: relative;
}
.col {
float: left;
width: 250px;
margin: 0;
}
}
@media only screen and (max-width: 930px) {
header nav ul {
display: none;
}
#menu-icon {
display: inline-block;
}
nav ul,
nav ul:active {
position: absolute;
padding: 40px;
background-color: #fdffff;
right: 10px;
width: 50%;
border: solid 1px #265c00;
box-shadow: 1px 1px 5px black,
-1px -1px 5px black;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav {
padding: 10px;
}
nav:hover ul {
display: block;
margin: 0px;
}
}
@media only screen and (max-width: 435px) {
.bwrapper {
width: 100%;
margin: auto;
}
header {
box-shadow: inset 2px 2px 5px black,
inset -2px -2px 5px black;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Wylde Snack Foods | A Dedicated Gluten-Free Facility and A Subsidiary Company of Ener-G Foods Inc.</title>
<meta name="Description" content="A dedicated gluten-free facility open to private-label business.">
<meta name="Keywords" content="wylde snack foods, ener-g foods inc">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="hover.css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="hwrapper">
<header>
<a href="#"><img src="img/logo02.png" alt="Wylde Snack Foods logo" class="hvr-buzz"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li class="hvr-bob"><a href="index.html">Home</a></li>
<li class="hvr-bob"><a href="products/products.html">Products</a></li>
<li class="hvr-bob"><a href="contract_mfg/contract_mfg.html">Contract MFG</a></li>
<li class="hvr-bob"><a href="about/about.html">About</a></li>
<li class="hvr-bob"><a href="contact/contact.html">Contact</a></li>
<li class="hvr-bob"><a href="http://www.ener-g.com/" target="_blank">Ener-G Foods</a></li>
</ul>
</nav>
</header>
</div>
<div class="bwrapper">
<h1>Some of Our Products</h1>
<section>
<div class="slider">
<div class="slide-viewer">
<div class="slide-group">
<div class="slide slide-1">
</div>
<div class="slide slide-2">
</div>
<div class="slide slide-3">
</div>
<div class="slide slide-4">
</div>
</div>
</div>
<div class="slide-buttons"></div>
</div>
</section>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/slider.js"></script>
<div class="twrapper">
<div class="alignwrap">
<div class="col left">
<h3>Our Products</h3>
<p>
We are a dedicated gluten-free facility which makes a variety of products. Additionally, we avoid the top allergens listed by FALCPA. Click <a href="products/products.html">here</a> to be redirected to our products page.
</p>
</div>
<div class="col center">
<h3>Our Clients</h3>
We are currently open to private-label business; however, other business inquiries may be accepted. Click <a href="">here </a> to be redirected to our Contract MFG.
</div>
<div class="col right">
<h3>Our Certification</h3>
We are SQF certified with some of our products being certified as organic. Click <a href="certification/certification.html">here</a> to be redirected to our certifications.
</div>
</div>
</div>
<footer>
<ul>
<li><a href="certification/certification.html">Certification</a></li>
</ul>
<span>©Wylde Snack Foods</span>
</footer>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire