Create a Responsive Website from scratch Quickly and easily use Media Query CSS lesson Free styling

by

CSS setting Media Query with Final CSS style Updates
Resize and stack columns as rows on screen sizes less than 640px. Add the media query and make adjustments to the look and feel of the website on smaller screens. Test out the styling and preview how it adjusts to different size screens. Use the placeholder content to simulate real website content to be added afterwards.

@import url(‘https://fonts.googleapis.com/css2?family=Open+Sans&family=PT+Sans&display=swap’);
body{
font-family: ‘PT Sans’, sans-serif;
}

  • {
    box-sizing: border-box;
    }

nav ul {
font-family: ‘Open Sans’, sans-serif;
display:grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 50px;
justify-content:center;
justify-items:center;
list-style-type:none;
margin:0;
}

nav ul li{
background-color:#000;
width:90%;
text-align:center;
line-height:50px;
}
nav ul li a{
text-decoration:none;
color:white;
}
nav ul li:hover{
background-color:red;
}

.wrapper {
display: grid;
grid-template-rows: 150px repeat(3,auto);
grid-template-columns: 3fr 1fr;
grid-gap: 1em;
}

.wrapper>* {
border: 1px solid black;

}

.wrapper>header {
text-align:center;
background-color:#111;
grid-column: 1/3;
padding:10px;
}
.wrapper>header>div:first-child{
font-size:3em;
padding-top:20px;
color:red;
}
.wrapper>header>div:last-child{
font-size:1.5em;
color:#bbb;
font-style:italic;
}

.wrapper>nav {
background-color: #111;
grid-column: 1/3;
}

.wrapper>article {
padding:10px;
background-color: #ccc;
font-size:1.2em;
}
.wrapper>article img{
float:right;
border:5px solid white;
margin:5px;
}
.wrapper>article img:after {
content:”;
display:table;
clear:both;
}
.wrapper>aside {
background-color: #000;
color: white;
}
.wrapper>aside>div{
margin:10px 0;
border-bottom:red 2px solid;
padding:5px 3px;
}
.wrapper>aside>div::first-letter{
color:red;
font-size:1.4em;
}
.wrapper>footer {
display:grid;
grid-template-columns: 1fr 2fr;
grid-column: 1/3;
background-color: #000;
color:white;
}
.wrapper>footer>div{
padding:10px;
text-align:center;
}

.wrapper>footer>div:last-child {
background-color:#333;
}

@media only screen and (max-width:640px){
.wrapper {
grid-template-rows: repeat(4,auto);
grid-gap: 0;
}
.wrapper>article img{
float:none;
display:block;
width:100%;
border:0px;
margin:0px;
}
.wrapper>aside, .wrapper>article {
font-size:0.9em;
grid-column: 1/3;
}
.wrapper>footer {
display:grid;
grid-template-columns: 1fr;
}
}

Leave a Comment