{"id":2149,"date":"2024-07-01T15:49:04","date_gmt":"2024-07-01T14:49:04","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=2149"},"modified":"2024-07-01T15:49:06","modified_gmt":"2024-07-01T14:49:06","slug":"css-media-queries-for-responsive-design","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/","title":{"rendered":"Customizing CSS with Media Queries for Different Devices"},"content":{"rendered":"\n<p>In today&#8217;s multi-device world, creating a responsive web design is crucial to providing a seamless user experience. CSS media queries for responsive design empower developers to adapt the layout and style of a website based on the characteristics of the user&#8217;s device, such as screen size, resolution, and orientation. This article explores how to effectively use media queries to customize CSS for different devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What Are Media Queries?<\/strong><\/h3>\n\n\n\n<p>Media queries are a feature of CSS3 that enable the application of styles based on the results of one or more media features, such as width, height, and orientation. They are fundamental to responsive web design, allowing the creation of layouts that adapt to varying screen sizes and devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Basic Syntax of Media Queries<\/strong><\/h3>\n\n\n\n<p>A media query consists of a media type and one or more expressions that check for the conditions of particular media features. Here\u2019s a basic example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media screen and (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>In this example, the background color of the body changes to light blue when the viewport width is 600 pixels or less.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Applying Media Queries for Different Devices<\/strong><\/h3>\n\n\n\n<p>To customize CSS for various devices, it\u2019s essential to understand the common breakpoints for different screen sizes. Here are some typical breakpoints:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mobile devices:<\/strong> 0px to 767px<\/li>\n\n\n\n<li><strong>Tablets:<\/strong> 768px to 1024px<\/li>\n\n\n\n<li><strong>Laptops\/Desktops:<\/strong> 1025px and up<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Mobile Devices<\/strong><\/h4>\n\n\n\n<p>For mobile devices, you can use media queries to adjust the layout for smaller screens:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media screen and (max-width: 767px) {\n  .container {\n    width: 100%;\n    padding: 10px;\n  }\n  .menu {\n    display: none;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>In this example, we set the container width to 100%, added padding for mobile devices, and hid the menu to save space.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Tablets<\/strong><\/h4>\n\n\n\n<p>For tablets, you might want to adjust the layout to utilize the larger screen size while still considering touch navigation:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media screen and (min-width: 768px) and (max-width: 1024px) {\n  .container {\n    width: 80%;\n    margin: auto;\n  }\n  .menu {\n    display: block;\n    text-align: center;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>Here, we set the container\u2019s width to 80%, centering it on the screen, and displaying the menu centered for better usability on tablets.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Laptops and Desktops<\/strong><\/h4>\n\n\n\n<p>For larger screens, you can utilize the additional space to enhance the layout and readability:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media screen and (min-width: 1025px) {\n  .container {\n    width: 70%;\n    margin: auto;\n  }\n  .menu {\n    display: flex;\n    justify-content: space-between;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>In this example, the container\u2019s width is set to 70%, and the menu items are displayed in a flex container with space between them for a clean desktop layout.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Combining Media Queries<\/strong><\/h3>\n\n\n\n<p>You can combine multiple media queries to create more specific styles for various scenarios:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {\n  .container {\n    width: 90%;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>This example applies styles to tablets in landscape orientation, setting the container width to 90%.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using Media Queries for Responsive Images<\/strong><\/h3>\n\n\n\n<p>Media queries can also be used to serve different images based on the device&#8217;s screen size:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">&lt;img src=\"small.jpg\" alt=\"Small Image\" class=\"responsive-img\"&gt;\n\n&lt;style&gt;\n  @media screen and (min-width: 768px) {\n    .responsive-img {\n      content: url('medium.jpg');\n    }\n  }\n\n  @media screen and (min-width: 1025px) {\n    .responsive-img {\n      content: url('large.jpg');\n    }\n  }\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>This technique ensures that images are appropriately sized for different devices, improving load times and user experience.<\/p>\n\n\n\n<p>Here is a complete HTML file that includes the CSS media queries mentioned in the article. This will provide a basic responsive layout that adapts to different devices.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Responsive Web Design with Media Queries&lt;\/title&gt;\n  &lt;style&gt;\n    body {\n      font-family: Arial, sans-serif;\n    }\n\n    .container {\n      width: 70%;\n      margin: auto;\n      padding: 20px;\n      background-color: #f4f4f4;\n      border: 1px solid #ccc;\n    }\n\n    .menu {\n      display: flex;\n      justify-content: space-between;\n      list-style: none;\n      padding: 0;\n    }\n\n    .menu li {\n      margin: 5px;\n    }\n\n    .responsive-img {\n      width: 100%;\n      height: auto;\n    }\n\n    \/* Mobile devices *\/\n    @media screen and (max-width: 767px) {\n      .container {\n        width: 100%;\n        padding: 10px;\n      }\n\n      .menu {\n        display: none;\n      }\n    }\n\n    \/* Tablets *\/\n    @media screen and (min-width: 768px) and (max-width: 1024px) {\n      .container {\n        width: 80%;\n        margin: auto;\n      }\n\n      .menu {\n        display: block;\n        text-align: center;\n      }\n    }\n\n    \/* Laptops and Desktops *\/\n    @media screen and (min-width: 1025px) {\n      .container {\n        width: 70%;\n        margin: auto;\n      }\n\n      .menu {\n        display: flex;\n        justify-content: space-between;\n      }\n    }\n\n    \/* Tablets in landscape orientation *\/\n    @media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {\n      .container {\n        width: 90%;\n      }\n    }\n\n    \/* Responsive Images *\/\n    @media screen and (min-width: 768px) {\n      .responsive-img {\n        content: url('medium.jpg');\n      }\n    }\n\n    @media screen and (min-width: 1025px) {\n      .responsive-img {\n        content: url('large.jpg');\n      }\n    }\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;h1&gt;Welcome to Our Responsive Website&lt;\/h1&gt;\n    &lt;ul class=\"menu\"&gt;\n      &lt;li&gt;Home&lt;\/li&gt;\n      &lt;li&gt;About&lt;\/li&gt;\n      &lt;li&gt;Services&lt;\/li&gt;\n      &lt;li&gt;Contact&lt;\/li&gt;\n    &lt;\/ul&gt;\n    &lt;p&gt;This is a sample paragraph to demonstrate responsive web design using CSS media queries. Resize the browser window to see the layout change based on different screen sizes.&lt;\/p&gt;\n    &lt;img src=\"small.jpg\" alt=\"Responsive Image\" class=\"responsive-img\"&gt;\n  &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h3>\n\n\n\n<p>Media queries are a powerful tool in CSS for creating responsive designs that adapt to various devices. By understanding and applying CSS media queries for responsive design effectively, you can ensure your website looks great and functions well on any screen size. Whether you&#8217;re targeting mobile devices, tablets, or desktops, media queries help create a seamless and enjoyable user experience across all platforms.<\/p>\n\n\n\n<p><a href=\"https:\/\/codeflarelimited.com\/blog\/codefl\/\">Codeflare&#8217;s transformative impact on the tech industry in Nigeria<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s multi-device world, creating a responsive web design is crucial to providing a seamless user experience. CSS<\/p>\n","protected":false},"author":3,"featured_media":2150,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[32],"tags":[8],"class_list":["post-2149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cascading-style-sheet","tag-programming"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS media queries for responsive design<\/title>\n<meta name=\"description\" content=\"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS media queries for responsive design\" \/>\n<meta property=\"og:description\" content=\"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-01T14:49:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-01T14:49:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1120\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kene Samuel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/\"},\"author\":{\"name\":\"Kene Samuel\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\"},\"headline\":\"Customizing CSS with Media Queries for Different Devices\",\"datePublished\":\"2024-07-01T14:49:04+00:00\",\"dateModified\":\"2024-07-01T14:49:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/\"},\"wordCount\":521,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/IMG-20240701-WA0024.jpg\",\"keywords\":[\"programming\"],\"articleSection\":[\"Cascading style sheet\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/\",\"name\":\"CSS media queries for responsive design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/IMG-20240701-WA0024.jpg\",\"datePublished\":\"2024-07-01T14:49:04+00:00\",\"dateModified\":\"2024-07-01T14:49:06+00:00\",\"description\":\"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/IMG-20240701-WA0024.jpg\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/IMG-20240701-WA0024.jpg\",\"width\":1120,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/css-media-queries-for-responsive-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cascading style sheet\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/cascading-style-sheet\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Customizing CSS with Media Queries for Different Devices\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/c501609bab46c16807eb32106074f206\",\"name\":\"Kene Samuel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g\",\"caption\":\"Kene Samuel\"},\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/kene\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS media queries for responsive design","description":"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/","og_locale":"en_US","og_type":"article","og_title":"CSS media queries for responsive design","og_description":"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...","og_url":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/","article_published_time":"2024-07-01T14:49:04+00:00","article_modified_time":"2024-07-01T14:49:06+00:00","og_image":[{"width":1120,"height":630,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","type":"image\/jpeg"}],"author":"Kene Samuel","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/"},"author":{"name":"Kene Samuel","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206"},"headline":"Customizing CSS with Media Queries for Different Devices","datePublished":"2024-07-01T14:49:04+00:00","dateModified":"2024-07-01T14:49:06+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/"},"wordCount":521,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","keywords":["programming"],"articleSection":["Cascading style sheet"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/","url":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/","name":"CSS media queries for responsive design","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","datePublished":"2024-07-01T14:49:04+00:00","dateModified":"2024-07-01T14:49:06+00:00","description":"Discover effective techniques for using CSS media queries for responsive design. Learn how to adapt layouts and styles ...","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","width":1120,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/css-media-queries-for-responsive-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cascading style sheet","item":"https:\/\/codeflarelimited.com\/blog\/cascading-style-sheet\/"},{"@type":"ListItem","position":3,"name":"Customizing CSS with Media Queries for Different Devices"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/c501609bab46c16807eb32106074f206","name":"Kene Samuel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3e1716cd715a5b5491e1f2da373b52f2f73aeb37d268baff34719116e386d848?s=96&d=mm&r=g","caption":"Kene Samuel"},"url":"https:\/\/codeflarelimited.com\/blog\/author\/kene\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2024\/07\/IMG-20240701-WA0024.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=2149"}],"version-history":[{"count":1,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2149\/revisions"}],"predecessor-version":[{"id":2151,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/2149\/revisions\/2151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/2150"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=2149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=2149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=2149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}