Responsive Website Layout

When designing a website, you have to consider the different sizes of screens of your internet users. These may access your website using a computer (desktop/laptop), a tablet, a smartphone, a smart TV…

A responsive website is a website where the layout adapts to the size of the screen.

On a large screen, the layout may include a header, a footer, several columns, left and right panels. A responsive layout can then adapt to smaller/narrower screens such as smartphones by adopting a linear layout (where all the sections mentioned above appear one after the other).

responsive-layout-website-design

Using CSS it is possible to apply different sizes and positions to different sections of the website based on the size of the screen.

If you have used one of the layout from “HTML – Website Layout” then you can add the extra CSS provided below to make your website responsive.

@media screen and (max-width: 1040px) {
	BODY {
		margin: 20px 20px 20px 20px;
	}
	
	.page, .pageHeader, .pageContent, .pageLeftPanel, .pageRightPanel, .pageFooter {
		width: 100%;
	}
	
	.pageContent, .pageLeftPanel, .pageRightPanel {
		min-height: auto;
	}

	IMG {
		max-width: 100%;
	}
}

Reference : https://www.101computing.net/responsive-website-layout/