Reputation: 13
Guys I am unable to get the responsive grid to work properly. I have several columns that I would like to change as the screen size adjusts. I am only testing this in my browser (safari & firefox) on my desktop. what I have tried is using col-xs-3 col-sm-2 col-lg-1 and I only get col-xs-3 no matter what i do to the browser size. Any thoughts?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class=container-fluid>
<h1><strong><center>Hello World!</center></strong></h1>
<div class=row>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class=col-xs-3 col-md-2 col-lg-1>
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
</div>
</body>
</html>
CSS
body {
background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color:#fff;
background-color:#333;
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;}
.thumbnail {
opacity: 0.1;
}
.thumbnail:hover {
opacity: 0.6
}
Upvotes: 1
Views: 643
Reputation: 134
You have to put your style inside your body and close your brackets Look a your code now : Codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
<div class="container-fluid">
<h1><strong><center>Hello World!</center></strong></h1>
<div class=row>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
<div class="col-xs-3 col-md-2 col-lg-1">
<a href="#" class="thumbnail">
<img src=/Users/tshon2/Desktop/transparent3.jpeg class="img-responsive">
</a>
</div>
</div>
<style>
body { background: url('/Users/tshon2/Desktop/rabbit.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; color:#fff; background-color:#333; font-family: 'Open
Sans',Arial,Helvetica,Sans-Serif;} .thumbnail { opacity: 0.1; } .thumbnail:hover { opacity: 0.6 }</style
</body>
</html>
Upvotes: 1
Reputation: 16948
You're missing the enclosing quotes on a lot of your HTML attributes. Specifically, your class attributes, hence why only the first one is taking effect. Good practice is to always wrap your attributes in quotes.
Upvotes: 1