How to
make blogger template responsive
You are thinking How are Responsive Layouts Designed. For me
it's very simple to design responsive blogger template. In fact every template
can be changed into responsive template. The only thing you need to know is
HTML and CSS. If you know both , then it
will be very easy to make your template responsive.
Every template can be made responsive in just 2 simple ways
which are:
1. Meta viewport.
2. @media queries.
Normally browsers opens Webpages in desktop view. It is OK
to view Webpages in desktop but when you open your Webpages in mobiles and low
resolution screens, it becomes very hard to read and click on links. You have
to zoom every time you want to read a portion of Webpage. To overcome this
situation we need to help our browser in detecting device-width which is done
with metaview ports.
Meta viewport helps in detecting device width for the
browsers. Now the next step is to add media queries. In media queries we use
custom CSS for different screen sizes. Media queries acts as the conditional if
else tags for the browsers. Example. For desktop view you set 3 column view and
for tablet you use 2 column view and similarly you use single column for mobile
phones. Now when a person opens your website,
then the browser will detect screen size with the help of meta viewport
and then will call appropriate css for that device. To make your website
responsive you need to follow two basic steps which I will explain below.
Step by step to make responsive templates.
Step 1: add meta
viewport just below the <head> tag of your blogger template.
<meta name="viewport" content="
width=device-width , initial-scale=1, maximum-scale=1"/>
Step 2: Add media queries to your css file.
/*
Laptops & Desktops */
@media only screen and (max-width : 1280px) {
/* css here will be rendered if and only if device width is
less than 1280px */
}
/*
Tablets 1024px */
@media only screen and (max-width : 1024px) {
/* css here will be rendered if and only if device width is
less than 1024px */
}
/*
Tablets 768px */
@media only screen and (max-width : 768px) {
/* css here will be
rendered if and only if device width is less than 768px */
}
/*
Phones 640px */
@media only screen and (max-width : 640px) {
/* css here will be
rendered if and only if device width is less than 640xpx */
}
/*
Phones 480px */
@media only screen and (max-width : 480px) {
/* css here will be rendered if and only if device width is
less than 480px */
}
/*
Small Mobiles 320px */
@media only screen and (max-width : 320px) {
/* css here will be rendered if and only if device width is
less than 320px */
}
Nyc
ReplyDeleteThis comment has been removed by the author.
ReplyDelete