{"id":1350,"date":"2020-03-24T07:59:01","date_gmt":"2020-03-24T07:59:01","guid":{"rendered":"https:\/\/blog.infotheme.net\/?p=1350"},"modified":"2020-03-24T08:05:19","modified_gmt":"2020-03-24T08:05:19","slug":"css-media-queries-to-make-your-website-responsive","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/css-media-queries-to-make-your-website-responsive\/","title":{"rendered":"CSS Media Queries to make your website responsive"},"content":{"rendered":"\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#What_is_responsive_website_design_and_Cross_browser_compatibility_issue\"><span class=\"toc_number toc_depth_1\">1<\/span> What is responsive website design and Cross\nbrowser compatibility issue?<\/a><\/li><li><a href=\"#What_is_CSS3_Media_Quries\"><span class=\"toc_number toc_depth_1\">2<\/span> What is CSS3 Media Quries?<\/a><\/li><li><a href=\"#How_to_use_media_Queries\"><span class=\"toc_number toc_depth_1\">3<\/span> How to use media Queries?<\/a><ul><li><a href=\"#Media_queries_support_for_older_browsers\"><span class=\"toc_number toc_depth_2\">3.1<\/span> Media queries support for older browsers<\/a><\/li><\/ul><\/li><li><a href=\"#Final_Thoughts\"><span class=\"toc_number toc_depth_1\">4<\/span> Final Thoughts    <\/a><\/li><\/ul><\/div>\n<h2><span id=\"What_is_responsive_website_design_and_Cross_browser_compatibility_issue\">What is responsive website design and Cross\nbrowser compatibility issue?<\/span><\/h2>\n\n\n\n<p>Responsive design is the latest development\nway which most of the developers do follow to develop any website. Responsive\nlayout or design allows a website to adjust itself on different screen sizes\nand hence all the content of website gets proper readability as well.<br>\n<br>\nIt\u2019s the first and important requirements of all website owners that their\nwebsite should be fully responsive so that their websites visitors can view\ntheir website on any type of devices For example: Laptop, desktop, smartphones,\ntablet etc. <\/p>\n\n\n\n<p><strong><em>IF\nyour website is not visible properly on different browsers then we can say that\nyour website is not cross browser compatible.<\/em><\/strong><\/p>\n\n\n\n<p>There are so many websites which are still\nnot responsive or, you can say cross browser compatible. These website visitors\ndo face difficulty to view them on mobile or tablet devices and hence they\nleave website very soon.<\/p>\n\n\n\n<p>Most of the website owners who don\u2019t have a\nresponsive website can have some common questions on their mind like below:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><em>I have having a very old website and it is not responsive, what should I Do?<\/em><\/p><p><em>My developer didn\u2019t make my website responsive; can I make it responsive now?<\/em><\/p><p><em>My website is made on WordPress but it is not responsive. Do I have to redesign it from beginning or I can make it responsive by adding some code on it?<\/em><\/p><p><em>I am having a simple html\/css website, can I make it responsive?<\/em><\/p><\/blockquote>\n\n\n\n<p><strong>YES, We\nhave a solution for you. <\/strong><\/p>\n\n\n\n<p>CSS Media queries allow use to add some stying\ncode on our style sheet and these lines of code called \u201cMedia Quries\u201d.<\/p>\n\n\n\n<p>With the help of media queries, we can write\ncode in our CSS file as per the screen (device) size. In simple words, you can\nsay that we do write media queries (style code) in conditional way.&nbsp; I mean we can write different styling code\nfor different screen size at one place.<\/p>\n\n\n\n<p>In this way, we will write all media queries\nin one place and they get execute as per the visitor screen size.<\/p>\n\n\n\n<h2><span id=\"What_is_CSS3_Media_Quries\">What is CSS3 Media Quries?<\/span><\/h2>\n\n\n\n<p>CSS is stand for Cascading Style Sheets which is responsive for\nyour website look and feel. It handles your website frontend design and look\nfor your visitors.<\/p>\n\n\n\n<p>CSS3 is the latest version of CSS used on\nalmost every latest websites frontend. CSS3 has provided many advance and\nlatest features for developers to make the website more attractive and\nresponsive as well.&nbsp; CSS3 has made the\nfrontend developers work very easy but at the same time it makes the work complicated\nas well because if this is not handled properly, it creates cross browser\ncompatibility issue for website.<\/p>\n\n\n\n<p>Cross Browser Compatibility in simple terms\nis that your website is not visible properly on different browsers with\ndifferent screen sizes. For example: website is not coming up properly on smartphone\nbut it is coming fine on laptop and tablet etc.<\/p>\n\n\n\n<p>Once we face such issues, CSS media queries becomes very handy to resolve such issues.<\/p>\n\n\n\n<p>Media queries defines the modules in CSS3 in which\nwe defines different module sections for different screen sizes or you can say\nscreen resolutions and we can write different styling code on each different screen\nsize module.<\/p>\n\n\n\n<p>In this way, different style code will be executed for website as per the screen size. For example: we can write a different styling code for tablets and smartphones because both will have different screen resolution (Screen size).<\/p>\n\n\n\n<p>CSS Media queries are the simple and best way\nto use different look and feel (Style) to different devices (Smartphone,\ntablets, laptops, retina display etc.)<\/p>\n\n\n\n<h2><span id=\"How_to_use_media_Queries\">How to use media Queries?<\/span><\/h2>\n\n\n\n<p>To use media queries we use @media only\nscreen syntax to device the media type and then we can use screen minimum and\nmaximum size, we can also device screen orientation like: landscape or\nPortrait.<\/p>\n\n\n\n<p>Let me list of few commonly used media\nqueries modules or you can say syntax which you can use on your website to\nwrite media queries.<\/p>\n\n\n\n<p><em>\/* Smartphones (portrait and\nlandscape) &#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 320px)<\/p>\n\n\n\n<p>and (max-device-width : 480px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* Smartphones (landscape)\n&#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-width : 321px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* Smartphones (portrait) &#8212;&#8212;&#8212;&#8211;\n*\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (max-width : 320px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPads (portrait and landscape)\n&#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 768px)<\/p>\n\n\n\n<p>and (max-device-width : 1024px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPads (landscape) &#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 768px)<\/p>\n\n\n\n<p>and (max-device-width : 1024px)<\/p>\n\n\n\n<p>and (orientation\n: landscape)\n{<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPads (portrait) &#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 768px)<\/p>\n\n\n\n<p>and (max-device-width : 1024px)<\/p>\n\n\n\n<p>and (orientation\n: portrait)\n{<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* Desktops and laptops &#8212;&#8212;&#8212;&#8211;\n*\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-width : 1224px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* Large screens &#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-width : 1824px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPhone 5 (portrait &amp;amp;\nlandscape)&#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 320px)<\/p>\n\n\n\n<p>and (max-device-width : 568px) {<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPhone 5 (landscape)&#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 320px)<\/p>\n\n\n\n<p>and (max-device-width : 568px)<\/p>\n\n\n\n<p>and (orientation\n: landscape)\n{<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><em>\/* iPhone 5 (portrait)&#8212;&#8212;&#8212;&#8211; *\/<\/em><\/p>\n\n\n\n<p>@media only screen<\/p>\n\n\n\n<p>and (min-device-width : 320px)<\/p>\n\n\n\n<p>and (max-device-width : 568px)<\/p>\n\n\n\n<p>and (orientation\n: portrait)\n{<\/p>\n\n\n\n<p><em>\/* STYLES GO HERE *\/<\/em><\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>You can change the screen size\nand orientation of screen as per your understanding and write the styling code\nas per your needs. It will allow you to write different style code for\ndifferent screen size on different screen orientation and it will allow you to\nresolve your website cross browser compatibility issue and make it responsive\nas well.<\/p>\n\n\n\n<h3><span id=\"Media_queries_support_for_older_browsers\">Media queries support for older browsers<\/span><\/h3>\n\n\n\n<p>CSS\nmedia queries are support by all modern and latest browsers. For example: IE\n9+, FireFox 3.5+,&nbsp; Safari&nbsp; 3+ , Opera 7 , all smartphones and tablet devices.<\/p>\n\n\n\n<p>But\nolder versions of browsers not supported the CSS media queries but there is a\nsolution to make it work.<\/p>\n\n\n\n<p>Cross\nbrowser compatibility issue is very important for all websites and that is why\nwe use media queries to make it work. Normally we face cross browser compatibility\nissue on IE5 to IE8. A simple solution for this is to download \u201cjQuery plugin\u201d https:\/\/www.w3.org\/TR\/css3-mediaqueries\/\ncalled <strong>css3-mediaqueries.<\/strong><\/p>\n\n\n\n<p>Simply download the <a rel=\"noreferrer noopener nofollow\" aria-label=\"plugin (opens in a new tab)\" href=\"https:\/\/drafts.csswg.org\/mediaqueries-3\/\" target=\"_blank\">plugin<\/a> and add below script just before the &lt;\/body> tag.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>&lt;script src=&#8221;js\/css3-mediaqueries.js&#8221;>&lt;\/script><\/strong><\/p><\/blockquote>\n\n\n\n<p>Or, include this in following way.<\/p>\n\n\n\n<p>   <\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>&lt;!&#8211; css3-mediaqueries.js for IE less than 9 &#8211;><\/strong><\/p><p><strong> &lt;!&#8211; [if lt IE 9]> <\/strong><\/p><p><strong> &lt;script src=&#8221;http:\/\/css3-mediaqueries-js.googlecode.com\/svn\/trunk\/css3-mediaqueries.js&#8221;>&lt;\/script> <\/strong><\/p><p><strong> &lt;![endif]&#8211;> <\/strong><\/p><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<p>Now, you are ready to use the CSS media queries on your website to make it cross browser compatible.    <\/p>\n\n\n\n<h2><span id=\"Final_Thoughts\">Final Thoughts    <\/span><\/h2>\n\n\n\n<p><br> If you are creating a new website in WordPress, I suggest you to use fully responsive theme so that you can don\u2019t have to write any CSS media query because a fully responsive theme will make your website fully compatible with all the latest version of browsers. But sometimes once you customize the theme or use some plugins which are not compatible with your theme can create a cross browser compatibility issue, in that particular case use the CSS media queries to resolve the compatibility issue.<br> IF you are looking to create a simple html\/css template based website, I suggest try to use the CSS3 based fully responsive template which supports bootstrap, it will make your website fully responsive automatically and whenever you feel any cross browser compatibility issue you are always free to use CSS media queries.<br> And you already have a website which you developed or made very long time ago and you don\u2019t have to redesign it again but want to make it responsive with minimum possible budget and efforts CSS media queries are best choice for you.<br> I hope my this article will help you to resolve your website cross browser compatibility issue.    <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Contents1 What is responsive website design and Cross browser compatibility issue?2 What is CSS3 Media Quries?3 How to use media Queries?3.1 Media queries support for [&hellip;] <span class=\"read-more-link\"><a class=\"read-more\" href=\"https:\/\/infotheme.net\/blog\/css-media-queries-to-make-your-website-responsive\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":1351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[135,134],"tags":[303,304,302,301],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/1350"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=1350"}],"version-history":[{"count":3,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/1350\/revisions\/1355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media\/1351"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=1350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=1350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=1350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}