How to add view port tag in blogger or wordpress 2017

6
740
hello friends we all know that While designing responsive style sheets for your blogger blog, you just need to make sure to focus a lot on the Content area and Header but less on sidebar widgets and the footer widgets because they mean little when it comes to Mobile load time.Here are some tips that will help you to create a fluid and flexible layout for your blog.with this you can make your blog mobile compatible and fast responsive for mobile.here is also a list of instant article approval website list to increase your blog traffic To make your blog compatible for mobile or to make your blog responsive for all type of device you just need to follow given below steps

Steps to add view port tag in blogger or wordpress 2017:-

Add the following viewport meta tag that will auto adjust your blog content to device screen size,

Add this tag just below <head> tag

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
  • 1) Use the following Responsive Stylesheet while adding mobile Classes
  • Responsive Styles Cheat Sheet For Blogger Blogs
/* -----------Responsive Styles Cheat Sheet by MBT -----------------*/
@media only screen and (max-width:320px) {
}

@media only screen and (max-width:380px) {
}

/*-----iPhone 2G, 3G, 4, 4S ----------*/
@media only screen and (max-width:480px) {
}

/*-----iPhone 5,6 ----------*/
@media only screen and (max-width:568px) {
}

/*-----iPad, Tablet, Kindle, Nexus ----------*/
@media only screen and (max-width:930px) {
}

@media only screen and (max-width:1024px) {
}

@media only screen and (max-width:768px) {
}
  • The above breakpoints is what I use while designing templates for blogger and wordpress and it works best in both platforms. Remember to add the cheat cheat just above ]]></b:skin> to make sure they override all the previous styles.
  • Start from the Header and try to show nothing there but your blog logo and a simple responsive menu. Check the MBT responsive view
  • Next give a 100{cea2dacae8f6839fc8743f206af5c86edba925d5d01c39a27e8185d8d7be05d0} width to your Content area. i.e the post-body class. Edit the font sizes and margin/padding accordingly
  • Give 100{cea2dacae8f6839fc8743f206af5c86edba925d5d01c39a27e8185d8d7be05d0} width to Sidebar section and widgets and try to add the display:none CSS property to all widgets that you don’t want to show in mobile view but never to ADS.
  • Give 100{cea2dacae8f6839fc8743f206af5c86edba925d5d01c39a27e8185d8d7be05d0} width to Footer widgets
  • Play with your stylesheet and test the changes at mobiletest.me which offers several device emulators
  • A Responsive layout is nothing but adding a viewport tag and then the Cheat sheet that I shared above where you will add the customized CSS classes. Let me know if you need more help

LEAVE A REPLY

Please enter your comment!
Please enter your name here