Home| Questions|Q 59932
Next
Answered
Ankit
Beginner
Asked: 2022-06-11T08:36:36+05:45 In:

How to make site responsive using HTML CSS?

how can we make website responsive for mobile and desktop using HTML and CSS only? So I am new to web development. I was wondering if it is possible to make a responsive sites with ONLY HTML and CSS? Or learning Bootstrap or Tailwind a must?

question
Share

    Related Questions

    You must login to add an answer.

    Need An Account,

    7 Answers

    1. I ❤️ ITSNP

      You can make a responsive site Only using HTML & CSS. Framework work is used to save your time. it is not necessary that a framework is needed to make a site Responsive. You can make it by using only CSS too but it takes a lot of time so a framework is needed.

      To choose which framework you should learn. please watch this video

      • 1
    2. Best Answer

      You can do it using css only.. using media query and break points this is how systax goes

      @media screen and (max-width: 1000px) {
.classname {
width: 100%; /* The width of element is 100%, when the viewport is 1000px or smaller */
}
}

       

      using media query you can change property of element according to the viewport width or height.. (width or height of the screen) this is how responsive are achieved

      another example is

       @media screen and (min-width: 800px) {
.classname {
width:100% /* this is applied when your screen width is minimum 800px */
}
}

       

      have a look at this MDN the great docs for HTML Responsive design – Learn web development | MDN (mozilla.org)

      • 0
    3. Pandey

      Yes you can do it using just CSS.

      It uses the @media rule to include a block of CSS properties only if a certain condition is true.

      Example

      If the browser window is 600px or smaller, the background color will be lightblue:

      @media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

      Complete Guide Here:
      • 0
    4. Explainer Newbie

      You can do it just by using CSS Media queries.

      https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

      Check this out

       

      • 0
    5. Beginner

      Of course you can do it and consider learning these things.

      1. meta viewport tag
      2. relative units
      3. flexbox & grid
      4. Media queries and screen breakpoint
      • 0
    6. Explainer Just a guy with great mustache.

      check out @media queries

      • 0
    7. Beginner

      You can do it with just CSS media queries and breakpoints…

      • 0