{"id":137,"date":"2026-03-24T02:20:13","date_gmt":"2026-03-24T02:20:13","guid":{"rendered":"http:\/\/localhost\/CodeWithSaeqa\/?p=137"},"modified":"2026-03-26T01:57:59","modified_gmt":"2026-03-26T01:57:59","slug":"responsive-design-make-your-website-look-good-on-all-devices","status":"publish","type":"post","link":"https:\/\/zainabahmadi.website\/index.php\/responsive-design-make-your-website-look-good-on-all-devices\/","title":{"rendered":"Responsive Design \u2013 Make Your Website Look Good on All Devices"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Learn how to create websites that look great on mobile, tablet, and desktop using responsive design techniques.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is Responsive Design?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Responsive Design means creating websites that automatically adjust to different screen sizes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> Your website should look good on:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mobile phones\ud83d\udcf1<\/li>\n\n\n\n<li>Tablets \ud83d\udcf2<\/li>\n\n\n\n<li>Laptops \ud83d\udcbb<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why is Responsive Design Important?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Today, most users visit websites using mobile devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If your website is not responsive:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text will be too small<\/li>\n\n\n\n<li> Layout will break<\/li>\n\n\n\n<li> Users will leave your site<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Responsive design improves user experience and makes your site look professional.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Example using CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a simple example using <strong>media queries<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Default style (desktop) *\/\nbody {\n  background-color: white;\n}\n\n\/* For screens smaller than 768px (tablet &amp; mobile) *\/\n@media (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">When the screen size is small, the background color changes<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Responsive Layout Example<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html>\n&lt;head>\n  &lt;title>Responsive Example&lt;\/title>\n  &lt;style>\n    .container {\n      display: flex;\n    }\n\n    .box {\n      width: 50%;\n      padding: 20px;\n      background-color: lightgray;\n    }\n\n    \/* Make it responsive *\/\n    @media (max-width: 768px) {\n      .container {\n        flex-direction: column;\n      }\n\n      .box {\n        width: 100%;\n      }\n    }\n  &lt;\/style>\n&lt;\/head>\n&lt;body>\n\n&lt;div class=\"container\">\n  &lt;div class=\"box\">Box 1&lt;\/div>\n  &lt;div class=\"box\">Box 2&lt;\/div>\n&lt;\/div>\n\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On desktop: boxes are side by side<\/li>\n\n\n\n<li>On mobile: boxes go one below another<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Using Bootstrap for Responsive Design<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bootstrap makes responsive design much easier<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\">\n  &lt;div class=\"row\">\n    &lt;div class=\"col-md-6\">Column 1&lt;\/div>\n    &lt;div class=\"col-md-6\">Column 2&lt;\/div>\n  &lt;\/div>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>On large screens: 2 columns<\/li>\n\n\n\n<li>On small screens: stacked automatically<\/li>\n<\/ul>\n\n\n\n<aside class=\"wp-block-group alignfull is-style-section-1 has-global-padding is-layout-constrained wp-container-core-group-is-layout-0553457c wp-block-group-is-layout-constrained is-style-section-1--1\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-65db5ff9 wp-block-group-is-layout-flex\" style=\"min-height:360px;margin-top:0;margin-bottom:0\">\n<h2 class=\"wp-block-heading has-text-align-center has-xx-large-font-size\">Next Step<\/h2>\n\n\n\n<p class=\"has-text-align-center is-style-text-subtitle is-style-text-subtitle--2 wp-block-paragraph\">Now that you understand responsive design, try building your own responsive web page<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><a href=\"http:\/\/localhost\/CodeWithSaeqa\/index.php\/2026\/03\/22\/creating-responsive-pages-with-bootstrap\/\" data-type=\"post\" data-id=\"68\" target=\"_blank\" rel=\"noopener\">Next, learn Bootstrap and build responsive layouts faster<\/a><\/strong><\/p>\n<\/div>\n<\/aside>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>A beginner-friendly guide to building responsive websites with CSS and Bootstrap<\/p>\n","protected":false},"author":1,"featured_media":150,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"video","meta":{"footnotes":""},"categories":[15,8,17],"tags":[19,18,20],"class_list":["post-137","post","type-post","status-publish","format-video","has-post-thumbnail","hentry","category-css","category-data-science","category-responsive","tag-b","tag-m","tag-v","post_format-post-format-video"],"_links":{"self":[{"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/posts\/137","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/comments?post=137"}],"version-history":[{"count":2,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/posts\/137\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/posts\/137\/revisions\/167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/media\/150"}],"wp:attachment":[{"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/media?parent=137"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/categories?post=137"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zainabahmadi.website\/index.php\/wp-json\/wp\/v2\/tags?post=137"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}