ok i have been at this for a few days and need help figuring out how to make responsive imgs
what im asking is why cant i get #logo-img centered and changing with the screen size am i just missing something i dont have much knowledge on rwd yet and need help
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div id="logo-img"></div>
</header>
<main class="row">
<nav>
<div class="col-sm-3 col-md-3">
<ul>
<li><a href="">tba</a></li>
<li><a href="">tba</a></li>
<li><a href="">tba</a></li>
<li><a href="">tba</a></li>
<li><a href="">tba</a></li>
</ul>
</div>
</nav>
<div class="col-sm-6 col-md-6">
<h2>Our Mission Statement</h2>
<p>The Cedar Crest Society exists to ensure that members of our community acquire full citizenship; including the rights, obligations and privileges attainable by all citizens.</p>
</div>
<div class="col-sm-3 col-md-3">
<aside>
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</aside>
</div>
</main>
<footer>
</footer>
</div>
</body>
</html>
Code:
*{box-sizing:border-box; margin:0; padding:0;}
main{background:#e1e2f3}
img{width:auto; max-width:100%; height:auto;
margin:0 auto;}
.row::after { content:""; clear: both; display: block;}
/*header*/
header{background:#4b77a2; text-align:center;}
#logo-img{background:url([URL]https://placehold.it/745x300[/URL]) no-repeat;
height:300px; margin:0 auto; background-size:contain;}
/*main*/
main .col-sm-6,
main .col-md-6{background:#fff; height:100vh;}
h2, h3{text-align:center}
/*nav*/
nav ul{list-style-type:none; background:#f1f1f1}
nav li{background:#4b77a2; margin:5px 0; text-align:center;
text-transform:uppercase}
nav a{text-decoration:none; color:#fff; padding:8px 16px;
display:block;}
nav a:hover{background:#333}
/*aside*/
aside{background:#4b77a2;}
/*footer*/
footer{background:#333; height:125px;}
[class*="col-"]{width: 100%; float:left; padding:15px;}
/* For small screens */
@media(min-width:768px) {
#logo-img{max-width:50%; background:url([URL]http://img.awesomefoundation.org/q/src/https%3A%2F%2Faf-production.s3.amazonaws.com%2Fphotos%2Fimages%2F77475%2Foriginal%2Frecycle_2.jpg/output/jpg/thumb/500x300%23[/URL])
no-repeat; background-size:cover;}
.col-sm-1 {width: 8.33%;}
.col-sm-2 {width: 16.66%;}
.col-sm-3 {width: 25%;}
.col-sm-4 {width: 33.33%;}
.col-sm-5 {width: 41.66%;}
.col-sm-6 {width: 50%;}
.col-sm-7 {width: 58.33%;}
.col-sm-8 {width: 66.66%;}
.col-sm-9 {width: 75%;}
.col-sm-10 {width: 83.33%;}
.col-sm-11 {width: 91.66%;}
.col-sm-12 {width: 100%;}
}
/* For medium screens*/
@media(min-width: 1024px){
#logo-img{max-width:50%; background:url([URL]http://placehold.it/709x300/752aa4/fff[/URL]) no-repeat; background-size: contain ;}
.col-md-1 {width: 8.33%;}
.col-md-2 {width: 16.66%;}
.col-md-3 {width: 25%;}
.col-md-4 {width: 33.33%;}
.col-md-5 {width: 41.66%;}
.col-md-6 {width: 50%;}
.col-md-7 {width: 58.33%;}
.col-md-8 {width: 66.66%;}
.col-md-9 {width: 75%;}
.col-md-10 {width: 83.33%;}
.col-md-11 {width: 91.66%;}
.col-md-12 {width: 100%;}
}
/* For large screens*/
@media(min-width: 1440px){
#logo-img{max-width:50%; background:url([URL]http://placehold.it/1187x300/752aa4/fff[/URL]) no-repeat;}
.col-lg-1 {width: 8.33%;}
.col-lg-2 {width: 16.66%;}
.col-lg-3 {width: 25%;}
.col-lg-4 {width: 33.33%;}
.col-lg-5 {width: 41.66%;}
.col-lg-6 {width: 50%;}
.col-lg-7 {width: 58.33%;}
.col-lg-8 {width: 66.66%;}
.col-lg-9 {width: 75%;}
.col-lg-10 {width: 83.33%;}
.col-lg-11 {width: 91.66%;}
.col-lg-12 {width: 100%;}
}
Last edited by Cyan,
, Reason: added tag for easier reading
