Tutorial: how to make website that look 'OK' with both: mobile and computer screens
Easiest way to make responsive webpage design (when using different screen sizes: site layouts are different) is to use CSS-Grid.
It only takes about ten lines of easy code to make everything appear where I want, when using css grid-template-areas.
This is example basic template, how mobile version layout looks like:
and this is how that website layout will look when looking with computer:
Of course it's possible to make it better, different or more advanced than this lousy template is (changing text, button and logo sizes is good idea, for example ) , but this is just simple example.
Me myself, I learned this amazing technology from youtube: https://www.youtube.com/watch?v=HgwCeNVPlo0
you can copy and paste code below to a new file,
name file to index.html,
open with browser (don't use IE lol)
and play with your browser window size to see how it works!
here is code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="stylesheet" href="style.css">-->
<style>
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"title"
"header"
"sidebar"
"content"
"footer";
grid-gap:1px;
}
@media screen and (min-width: 736px) {
.grid {
display: grid;
grid-template-columns: 1fr 100px 3fr 1fr;
grid-template-rows: auto;
grid-template-areas:
". title title ."
". header header ."
". sidebar content ."
". footer footer .";
grid-gap:1px;
}
}
.grid > div {
border-radius: 5px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
p {
text-align: justify;
}
.title {
grid-area: title;
background-color: #fff000;
}
.header {
grid-area: header;
background-color: #888888;
}
.sidebar {
grid-area: sidebar;
background-color: #666999;
}
.content {
grid-area: content;
background-color: #888222;
}
.footer {
grid-area: footer;
background-color: #444777;
}
</style>
<title></title>
</head>
<body>
<div class="grid">
<div class="title">Hello this is my website</div>
<div class="header">This is my website header</div>
<div class="sidebar">Put<br>
Little <br>
Menu<br>
Here<br>
Or<br>
Something</div>
<div class="content"><p>
Here goes content text .. this can be large add some photos too
Here goes content text .. this can be large add some photos too
Here goes content text .. this can be large add some photos too
Here goes content text .. this can be large add some photos too
Here goes content text .. this can be large add some photos too
Here goes content text .. this can be large add some photos too
</p>
</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
#html #css #coding #webdesign #responsive