CSS Media Query

<!-- wp:paragraph -->\n<p>1st we will write media query to hide things on mobile</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n &lt;meta charset=\"utf-8\">\n &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n &lt;title>Responsive Media Queries&lt;/title>\n\n &lt;style type=\"text/css\">\n /* Default styles for all divs */\n div {\n text-align: center;\n padding: 20px;\n font-size: 20px;\n }\n\n /* Styles for the desktop div */\n @media screen and (min-width: 1201px) {\n .desktop {\n display: block;\n }\n .tablet, .mobile {\n display: none;\n }\n }\n\n /* Styles for the tablet div */\n @media screen and (min-width: 801px) and (max-width: 1200px) {\n .tablet {\n display: block;\n }\n .desktop, .mobile {\n display: none;\n }\n }\n\n /* Styles for the mobile div */\n @media screen and (max-width: 800px) {\n .mobile {\n display: block;\n }\n .desktop, .tablet {\n display: none;\n }\n }\n &lt;/style>\n&lt;/head>\n&lt;body>\n\n&lt;div class=\"desktop\">\n This will show on desktop\n&lt;/div>\n\n&lt;div class=\"tablet\">\n This will show on tablet\n&lt;/div>\n\n&lt;div class=\"mobile\">\n This will show on mobile\n&lt;/div>\n\n&lt;/body>\n&lt;/html>\n</code></pre>\n<!-- /wp:code -->