I just finished Colmar Academy and i got it to look the way i wanted both in a full size browser and on mobile, but it doesn’t scale very well. Do you guys have any advice on responsive design, i’m also having problems with media query, i understand how to use it but the pixel widths don’t match up with phone widths.
( for example my media query for a phone width of 425px wont activate unless i set it to 1000px )
here’s my project and my code:
html
<!DOCTYPE html>
<html>
<head>
<title>Colmar Academy</title>
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Raleway:wght@200;400;600&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<img src="./resources/images/ic-logo.svg" class="logo">
<h1 class="logo-type"><strong>Colmar</strong> Academy</h1>
<img src="./resources/images/ic-on-campus.svg">
<img src="./resources/images/ic-online.svg">
<img src="./resources/images/ic-login.svg">
<ul>
<li>
<a href="">On Campus</a>
</li>
<li>
<a href="">Online</a>
</li>
<li>
<a href="">For companies</a>
</li>
<li>
<a href="">Sign in</a>
</li>
</ul>
</nav>
<main>
<div class="hero">
<img src="./resources/images/banner.jpg">
<div class="hero-text">
<h1 class="type1">Learn something<br>new everyday</h1>
<h3>Knowledge is power. You have the power to achieve many things.</h3>
<button>Start here</button>
</div>
</div>
<div class="subhero">
<div class="left">
<img src="./resources/images/information-main.jpg">
<h2>It doesn't hurt to keep practicing</h2>
<p>“There is no end to education. It is not that you read a book, pass an exam and finish with education.<br>The whole of life, from the moment you are born to the moment you die, is a process of learning”</p>
</div>
<div class="right">
<div class="row">
<img src="./resources/images/information-orientation.jpg">
<img src="./resources/images/information-orientation-mobile.jpg" class="mobile-img">
<div class="row text">
<h3>Orientation date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="row">
<img src="./resources/images/information-campus.jpg">
<img src="./resources/images/information-campus-mobile.jpg" class="mobile-img">
<div class="row text">
<h3>Our campus</h3>
<p>Find which campus is close by you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="row">
<img src="./resources/images/information-guest-lecture.jpg">
<img src="./resources/images/information-guest-lecture-mobile.jpg" class="mobile-img">
<div class="row text">
<h3>Special guest lecture</h3>
<p>Join a keynote with Oliver Sack about music in medical treatment</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
<div class="start-learning">
<h2>Start learning</h2>
<div class="course card">
<img src="./resources/images/course-software.jpg">
<div class="text">
<h3>Software engineering</h3>
<p>COURSES</p>
<p>Web Development, Mobile Development, iOT, APIs</p>
</div>
</div>
<div class="course card">
<img src="./resources/images/course-computer-art.jpg">
<div class="text">
<h3>Computer art</h3>
<p>COURSES</p>
<p>Imaging & Design, Web Design, Motion Graphics & Visual Effects, Computer Animation</p>
</div>
</div>
<div class="course card">
<img src="./resources/images/course-design.jpg">
<div class="text">
<h3>Design</h3>
<p>COURSES</p>
<p>User Experience Design, User Reasearch, Visual Design</p>
</div>
</div>
<div class="course card">
<img src="./resources/images/course-data.jpg">
<div class="text">
<h3>Data</h3>
<p>COURSES</p>
<p>Data Science, Big Data, SQL, Data Visualization</p>
</div>
</div>
<div class="course card">
<img src="./resources/images/course-business.jpg">
<div class="text">
<h3>Business</h3>
<p>COURSES</p>
<p>Product Development, Business Development, Startup</p>
</div>
</div>
<div class="course card">
<img src="./resources/images/course-marketing.jpg">
<div class="text">
<h3>Marketing</h3>
<p>COURSES</p>
<p>Analytics, Content Marketing, Mobile Marketing</p>
</div>
</div>
</div>
<div class="thesis-title">
<h2>Thesis exhibit</h2>
</div>
<div class="thesis-exhibit">
<div class=" thesis left">
<video src="./resources/videos/thesis.mp4" controls ></video>
<h3>Reimagine urban</h3>
<p>In the past decade or so, society has come to view cities as engines of economic growth, attracting unprecedented levels of attention and investment in emerging technologies that we can employ to make people’s lives more connected.</p>
</div>
<div class="thesis right">
<div class="row">
<img src="./resources/images/thesis-fisma.jpg">
<div class="row text">
<h3>Fisma: Design and Protoype</h3>
<p>Designer showcase of new prototype product</p>
<a href="#">Read more</a>
</div>
</div>
<div class="row">
<img src="./resources/images/thesis-now-and-then.jpg">
<div class="row text">
<h3>Orientation date</h3>
<p>Research study about New York</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2016 Colmar Academy. All rights reserved</p>
<ul>
<li>
<a href="#">Terms</a>
</li>
<li>
<a href="#">Privacy</a>
</li>
</ul>
</footer>
</main>
</body>
</html>
css
html,body{
margin: 0;
padding: 0;
font-family: 'raleway', sans-serif;
color: #2A364C;
}
h2{
font-size: 45px;
font-weight: 600;
}
h3{
font-size: 23px;
font-weight: 400;
}
h4{
font-size: 16px;
}
p{
font-weight: 200;
}
a{
text-decoration: none;
color: #2A364C;
}
a:hover{
text-decoration: underline;
}
nav{
box-sizing: border-box;
height: 64px;
width: 100%;
position: fixed;
z-index: 2;
background: #FFFEF2;
padding-left: 24px;
padding-right: 24px;
}
nav img{
vertical-align: middle;
display: none;
}
main{
position: absolute;
top: 64px;
}
.logo{
width: 50px;
display: inline-block;
vertical-align: middle;
}
h1.logo-type{
display: inline-block;
margin-top: 16px;
margin-bottom: 16px;
font-weight: 200;
}
ul{
float: right;
text-align: right;
display: inline-block;
padding: 22px;
margin: 0;
}
li{
display: inline-block;
padding-left: 16px;
}
.hero{
background-color: #2B7138;
padding: 0;
width: 100%;
box-sizing: border-box;
overflow: auto;
color: #FFFEF2;
}
.hero img{
width: 60%;
padding-right: 24px;
vertical-align: middle;
}
.hero-text{
box-sizing: border-box;
width: 35%;
display: inline-block;
vertical-align: middle;
font-family: 'raleway',sans-serif;
font-weight: 400;
}
.type1 {font-family:'Libre Baskerville','times new roman', serif;
font-size: 55px;
margin: 0;
}
button{
width: 100%;
padding: 16px;
color: white;
background: #C1993E;
border:none;
border-radius: 0;
margin: 10px auto;
font-family: 'raleway' sans-serif;
font-size: 22px;
}
.subhero{
background-color: #FFFEF2;
width: 100%;
box-sizing: border-box;
overflow: auto;
display: flex;
}
.left{
float: left;
width: 60%;
padding: 90px 24px 32px;
}
.right{
float: left;
border-left: 1px solid lightgray;
display: inline-block;
width: 40%;
padding-top: 74px;
}
.subhero img{
width: 100%;
}
.row{
padding: 16px;
}
.row:hover{
background-color: #E1EDF9;
}
.row .text{
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
width: 64%;
}
.row img{
box-sizing: border-box;
width: 35%;
vertical-align: middle;
height: auto;
}
.mobile-img{
display: none;
}
.start-learning{
background-color: #E1EDF9;
padding: 32px 72px;
width: 100%;
box-sizing: border-box;
}
.start-learning h2{
text-align: center;
}
.card{
display: inline-block;
width: 31%;
background: white;
margin: 16px;
height: 500px;
vertical-align: middle;
}
.card:hover{
transform: scale(1.02);
}
.card img{
width: 100%;
}
.card .text{
padding: 0 24px 24px;
}
.thesis-title h2{
width: 100%;
text-align: center;
background-color: #FFFEF2;
margin: 0px;
padding: 40px 0 30px;
border-bottom: 1px solid lightgray;
}
.thesis-exhibit{
background-color: #FFFEF2;
padding: 0 24px;
width: 100%;
box-sizing: border-box;
display: flex;
}
.thesis .left{
padding-top: 16px;
}
video{
width: 100%;
}
footer{
width: 100%;
box-sizing: border-box;
height: 96px;
padding: 12px 24px 36px;
background-color: #2B7138;
color: #FFFEF2;
}
footer p,a{
display: inline-block;
vertical-align: top;
color: inherit;
}
/*media query*/
@media only screen and (max-width: 1375px)
{
.hero img{
width: 40%;
}
@media only screen and (max-width: 400px)
{
main{
position: absolute;
top: 160px;
}
h2{
font-size: 80px;
}
h3{
font-size: 55px;
margin-bottom: 48px;
}
p,a{
font-size: 42px;
margin-bottom: 46px;
}
.hero img{
width: 100%;
padding: 0px;
}
h1.logo-type{
display: none;
}
nav{
display: flex;
justify-content: space-around;
height: 160px;
}
.logo{
width: 80px;
}
nav img{
vertical-align: middle;
display: inline-block;
width: 80px;
margin: 0 auto;
}
ul{
display: none;
}
.type1{
font-size: 5em;
}
.hero-text{
box-sizing: border-box;
padding: 120px 60px;
width: 100%;
}
button{
width: 100%;
padding: 60px;
margin: 10px auto;
font-size: 70px;
}
.left{
display: none;
}
.right{
width: 100%;
padding-bottom: 60px;
padding-top: 0;
}
.row{
padding: 0 60px;
}
.row img{
display: none;
}
.row .text{
width: 100%;
}
.row .mobile-img{
display: block;
width: 100%;
margin-top: 75px;
}
.start-learning{
padding: 0 60px 120px;
}
.start-learning h2{
padding: 40px 0 15px;
margin: 0;
}
.card{
display: block;
width: 100%;
height: auto;
margin: 30px 0;
}
.card img{
display: none;
}
.card .text{
padding: 0;
}
.card h3{
padding: 16px 16px 24px 16px;
margin: 0;
}
.card .text p{
display: none;
}
.thesis-exhibit{
padding: 0;
}
.thesis-exhibit .left{
display: block;
padding: 0;
width: 100%;
}
.thesis-exhibit h3, .thesis-exhibit p{
display: none;
}
.thesis-exhibit .right{
display: none;
}
footer{
height: 173px;
padding: 12px 60px 36px;
}
footer p{
margin-top: 65px;
}
}