Labels

CSS Simple Responsive Website

We will use CSS media queries to create a simple responsive website. It varies between two columns and full-width columns depending on screen width.

Simple Responsive Website

This example use media queries to change the layout arrangement of website to enhance the view on various devices.

media queries are CSS styles, that is applied to the same elements, depending on screen sizes.

Resize the Browser to see the effect.

My Website

Resize the browser window to see the effect.

Link Link Link Link

TITLE HEADING

Title description, Dec 2, 2022
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

TITLE HEADING

Title description, Dec 2, 2022
Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

About Me

Image

Some text about me in culpa qui officia deserunt mollit anim..

Popular Post

Image

Image

Image

Follow Me

Some text..

Footer

Example

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}

body {
font-family: Montserrat, sans-serif;
padding: 10px;
background: #f1f1f1;
}

/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
border-radius: 20px 20px 0 0;
}

.header h1 {
font-size: 50px;
}

/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #0054ff;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}

/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}

/* Fake image */
.fakeimg {
background-color: #f2f2f2;
width: 100%;
border-radius: 20px;
margin: 5px 0;
padding: 20px;
}

/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
border-radius: 0 0 20px 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>

<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 2, 2022</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 2, 2022</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>

</body>
</html>

Example Explained

  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - This Sets the viewport to the same as device width.
  • @media screen and (max-width: 800px)
    • @media screen - This select screen as its input i.e. the change in the width of the screen will use this media query.
    • and (max-width: 800px) - This select screen with its width less than 800px as its input i.e. the change in the width of the screen will use this media query.
  • @media screen and (max-width: 400px)
    • @media screen - This select screen as its input i.e. the change in the width of the screen will use this media query.
    • and (max-width: 400px) - This select screen with its width less than 400px as its input i.e. the change in the width of the screen will use this media query.
  • * { box-sizing: border-box; } - This Sets the width of the elements to include padding and border.
  • /* Left column */ .leftcolumn { float: left; width: 75%; }

    /* Right column */ .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; }
    • .leftcolumn { float: left; width: 75%; }- This Sets the width of the <div> element with class "leftcolumn" to 75% of the available width.
    • .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; }- This Sets the width of the <div> element with class "rightcolumn" to 25% of the available width.
    • By deafult, these two columns will be next to each other.
  • On the change of width to less than 800px, then both the columns will be stacked on top of one another.
  • On the change of width to less than 400px, then all the <li> element in the "topnav" will be stacked on top of one another.

Tags

Comments

Post a Comment