Labels

CSS Flexible Layout (Simple Website)

We will use CSS media queries to create a flexible Website. It changes the shape, size, position etc. of the elements, depending on screen sizes.

Flexible Simple Website

This example use media queries and flexbox to change the styles applied to elements, when the screen size changes.

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

Resize the Browser to see the effect.

Resize the browser window to see the responsive effect.

My Website

With a flexible layout.

Link Link Link Link

About Me

Photo of me:
Image

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

More Text

Lorem ipsum dolor sit ame.

Image

Image

Image

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.

Footer

Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title> <!-- Page Title -->
<meta charset="UTF-8"> <!-- Character sets used -->

<!-- Required for media queries and flexbox to work properly -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style>
* {
box-sizing: border-box;
}

/* Style the body */
body {
font-family: sans-serif;
margin: 0;
}

/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #0094ff;
color: white;
}

/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}

/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}

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

/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}

/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}

/* Fake image, just for this example */
.fakeimg {
background-color: #f2f2f2;
border: 1px solid #e6e6e6;
border-radius: 20px;
width: 100%;
padding: 20px;
}

/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>

<!-- Note -->
<div style="background:yellow;padding:5px">
<h4 style="text-align:center">Resize the browser window to see the responsive effect.</h4>
</div>

<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a <b>flexible</b> layout.</p>
</div>

<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<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>
<br>
<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>

<!-- Footer -->
<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. This is required for the Media Queries and Flexbox to work properly.
  • * { box-sizing: border-box; } - This Sets the width of the element to include padding and borders.
  • .navbar { display: flex; ... } - This Sets the <div> element with class "navbar" to flexible div, which will change the layout depending on screen sizes with the help of media query.
  • .row { display: flex; flex-wrap: wrap; } - This Sets the <div> element with class "row" to flexible div, which will change the layout depending on screen sizes with the help of media query.
  • .side { flex: 30%; ... } and .main { flex: 70%; ...} - This Sets the <div> element with class "side" and class "main" to the width of 30% and 70% respectively. These widths will become 100% on smaller screens using media queries.
  • @media screen and (max-width: 700px) { .row, .navbar { flex-direction: column; } } - The flex-direction sets the alignment of <div> just like the column in a table i.e. both the <div> will be aligned one below another.

Tags

Comments

Post a Comment