We have shared the steps to write a Css code suitable for Mobile Resolutions in this blog.
What’s the need for these types of Css?
When we apply normal css code in our site, the site will work properly. But when we go for mobile type and laptop type resolutions, normal css codes will not be able to produce profitable results. In these types of css framework codes, we will need to check our site in mobile resolutions as well. That’s the reason for this type of code being far better than the earlier one.
The solution for this type of coding is very simple. We have given below the process to write a CSS code which will suit Mobile resolutions:
1. Initially, you will need to write this code in an index.html page
(A) In the beginning of an html page, put this type of code before tag.
<!doctype html>
<html lang="en">
(B) After writing the above code inside the head tag, declare the types of codes shown below
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen"/><![endif]-->
<link rel="stylesheet" href="css/style.css" media="screen" />
(or)
<link rel="stylesheet" href=" css / style.css " media="only screen and (max-width:1023px)">
<link rel="stylesheet" href="css/ mobile.css" media="screen" />
Or
{Note : You declare below type you call a css code in separate stylesheet}
<link rel="stylesheet" href="css/mobile.css" media="handheld, only screen and (max-width: 767px)">
</head>
(C) After calling the css files in the head, you will need to write your html codes
For example:
<div class="container">
<div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
<div class="onecol">
<p>One</p>
</div>
</div>
</div>
(D) At the last, create CSS files
In style .css write this code in the container
In css, initially you will need to set the padding for container:
.container { Padding-left:20px; Padding-right:20px; }
(2) A common code is given below:
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
(3) You do not give width and height for images online. You must write these code in css for image tag
img, object, embed {
max-width: 100%;}
img {
height: auto;}
(4) The next step is Max-width: 1140px which is set to your div and also width: 100%
.row
{
width: 100%;
max-width: 1140px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
.row .onecol {
width: 4.85%;
}
(5) After completion of the above steps comes the most important part where you will mention the code for various resolution here.
@media only screen and (max-width: 1023px) {
body {
font-size: 0.8em;
line-height: 1.5em;
}
}
Below code is used for mobile. When you see the site in mobile resolution, these type of css code will be called.
/* Mobile */
@media handheld, only screen and (max-width: 767px) {
body {
font-size: 16px;
-webkit-text-size-adjust: none;
}
.row, body, .container {
width: 100%;
min-width: 0;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
.row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
width: auto;
float: none;
margin-left: 0px;
margin-right: 0px;
padding-left: 20px;
padding-right: 20px;
}
}
Upon completion of the steps stated above, you are done. You can now go and run your html page in your browser and also check various resolutions.
Please refer to the Screenshots given below:
1. Normal resolution
2. Smaller Screen Resolution
3. Mobile resolution
In this type of resolution, the entire floating elements are mentioned as none in css. Please refer to the css codes given above in this post.
