Yesterday nearly two hours to see my blog that the modification responsive finally complete and the results are quite satisfactory
when i it opened with a variety of screen resolutions .....
This time I will show you how to display your blog / website becomes responsive. As I mentioned in a post a while ago about the " Website responsive testing " about the meaning responsive. Responsive to the website is customize the look of your website or blog terhadapa gadgets we use, for example, Laptop, Tablet, Smart Phone with screen resolutions vary. Here we just add the code @media only screen and (max-width: 800px) { which means that the display size of the website / blog should not be more than 800 pixels
Example :
@media only screen and (max- width: 800 px) {
# outer-wrapper {width: 750px; margin: 0 auto;} // display size website
# main-wrapper {width: 750px;} // size page or content
# sidebar-wrapper {width: 750px;} // size of sidebar
#footer {width: 750px;} // size footer
}
the example above, the look of the website into one colom, yaa because possible to display 800 pixel website with 2 colom I think is not good. Here's how to create websites / blogs become responsive
1. Copy the following code below and place it below <head>
< Meta content = 'width = device-width, initial-scale = 1, maximum-scale = 1 " name = " viewport " />
2. Now Copy the following code paste it below ]]> </ b: skin>
< Style >
@ media only screen and (min-width: 768 px) and (max-width: 989 px) {
# outer-wrapper { width : 730 px; margin : 0 auto}
Code CSS others
}
@ Media only screen and (max-width: 767 px) {
# outer-wrapper { width : 540 px; margin : 0 auto}
Code CSS others
}
@ Media only screen and (max-width: 580 px) {
# outer-wrapper { width : 500 px}
Code CSS others
}
@ Media only screen and (max-width: 490 px) {
# outer-wrapper { width : 430 px}
Code CSS others
}
@ Media only screen and (max-width: 479 px) {
# outer-wrapper { width : 280 px}
Code CSS others
}
@ Media screen and (max-width: 260 px) {
# outer-wrapper { width : 210 px}
Code CSS others
}
</ Style >
The code that I use to create the look of this blog to be responsive
For the CSS code of his you can see ID of each element such as Sidebar, main-wrapper, outer-wrapper, footer and others for any template ID of each element can be different, like this blog is usually used # main-wrapper if I had #content_left .
To view the results can be viewed here Smart Responsive Tester for Web Designers click button Lauch the tool . then enter the address of your website or blog and click Test
May be useful.