Sign Up

Talk Programming , Career, Mental Health, Talk Personal Finance ❤️‍ Post a query and receive responses ✅

Have an account? Sign In


Have an account? Sign In Now

Sign In

Post a query and receive responses. Ask anything, Ask Mitra ❤️‍

Sign Up Here


Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.


Have an account? Sign In Now

Sorry, you do not have permission to ask a question, You must login to ask a question.


Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

Ask Mitra

Ask Mitra Logo Ask Mitra Logo

Ask Mitra Navigation

  • Home
  • About Us
  • Find Jobs
  • Blogs
    • Add New Blog !
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Ask a Question
  • Home
  • All Categories
  • Find Jobs
  • Points and Swags
    • Badges and Points
    • Ask Mitra Swags
  • Blog
    • Add New Blog !
  • FAQs
  • Community Members 💓
  • About Us
  • Contact Us
Home| Questions|Q 59932
Next
Answered
Ankit
AnkitBeginner
Asked: June 11, 20222022-06-11T08:36:36+05:45 2022-06-11T08:36:36+05:45In: Web Development

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
  • 0
  • 7 7 Answers
  • 79 Views
  • 0 Followers
  • 0
Share
  • Facebook

    Related Questions

    • How to join 100day challenge in Data science project
    • Hello guys, ma chai bachelor pass out ho ani I am looking for a place to learn more about flutter. ...
    • How can we build long-term, mutually beneficial relationships with our customers?
    • Today I have applied for urgent online e-passport form from Kathmandu and I submitted it but after that I found ...
    • What is wrong here??

    You must login to add an answer.


    Forgot Password?

    Need An Account, Sign Up Here

    7 Answers

    • Voted
    • Oldest
    • Recent
    • Random
    1. Anmol Yadav I ❤️ ITSNP
      2022-06-11T10:11:45+05:45Added an answer on June 11, 2022 at 10:11 am

      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
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    2. Best Answer
      [Deleted User]
      2022-06-11T09:19:04+05:45Added an answer on June 11, 2022 at 9:19 am

      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
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    3. pandey Pandey
      2022-06-11T10:29:29+05:45Added an answer on June 11, 2022 at 10:29 am

      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:
      https://www.w3schools.com/css/css_rwd_mediaqueries.asp
      • 0
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    4. Bikal Niraula Explainer Newbie
      2022-06-12T10:35:30+05:45Added an answer on June 12, 2022 at 10:35 am

      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
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    5. Cykik Beginner
      2022-06-12T12:08:28+05:45Added an answer on June 12, 2022 at 12:08 pm

      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
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    6. Notabhishekrai Explainer Just a guy with great mustache.
      2022-06-15T21:19:23+05:45Added an answer on June 15, 2022 at 9:19 pm

      check out @media queries

      • 0
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp
    7. Pratik98 Beginner
      2022-10-28T19:32:25+05:45Added an answer on October 28, 2022 at 7:32 pm

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

      • 0
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp

    Sidebar

    Ask A Question

    Your Favourite Topics

    • Announcements
    • Blockchain
    • Books

        • —Non Tech Books
        • —technical books
    • Business and Entrepreneurship
    • Careers
    • College
    • Content and Blog
    • CyberSecurity
    • Design and Arts
    • Devices and Gadgets
    • Digital Marketing
    • Entertainment

        • —Movies-Series-TV
        • —Music
        • —Sports
    • Events
    • For Admins only.
    • Health

        • —Fitness
    • Money

        • —Personal Finance
        • —Stock Market
    • Operating System

        • —linux
        • —windows
    • Other
    • Paid Internship
    • Programming

        • —AI/ML
        • —APIs
        • —C & C#
        • —Django
        • —Flutter
        • —Go
        • —HTML&CSS
        • —Java
        • —JavaScript
        • —Mobile Apps Development
        • —Node Js
        • —NoSQL
        • —Php
        • —Python
        • —React JS
        • —SQL

    Stats

    • Questions 1k
    • Answers 10k
    • Best Answers 391
    • Users 2k

    Top 6 Members This Month

    Vicky

    Vicky

    • 0 Questions
    • 78 Points
    Sensei
    puppet

    puppet

    • 0 Questions
    • 23 Points
    Beginner
    wtfixair

    wtfixair

    • 0 Questions
    • 22 Points
    Beginner
    Dhanmaya

    Dhanmaya

    • 0 Questions
    • 20 Points
    Beginner
    Riyesh

    Riyesh

    • 0 Questions
    • 20 Points
    Beginner
    pranitkarki

    pranitkarki

    • 0 Questions
    • 20 Points
    Beginner

    Trending Tags

    askmitra blockchain c++ career coding College cybersecurity Django Flutter help javascript laptop laravel linux poll Programming python question react web web development wordpress
    • Popular
    • Answers
    • Rounak Agrawal

      Ask Mitra Udemy Courses Giveaway

      • 76 Answers
    • Subedi Bibek

      The Complete JavaScript Course 2022: From Zero to Expert! Udemy ...

      • 73 Answers
    • Subedi Bibek

      Mega Giveaway at askmitra.com 🔥

      • 69 Answers
    • bishwaKiran
      bishwaKiran added an answer Try getting into githubs student program, use your university/collage/school ID… January 30, 2023 at 7:44 pm
    • Sandeep Poudel
      Sandeep Poudel added an answer SOLVED: It was due to unfinished SSL certificate installation January 27, 2023 at 7:11 pm
    • Aashutosh_k
      Aashutosh_k added an answer Software piracy protection system Fingerprint voting system Stock price prediction… January 26, 2023 at 7:37 pm

    Related Questions

    • How to check if the bat/ball touches the 4 sides ...

      • 2 Answers
    • Input Direction confusion in snake game JavaScript?

      • 1 Answer
    • which tech jobs have higest demand but least supply in ...

      • 1 Answer
    • What does ReactJS intern do in a internship programme?

      • 2 Answers
    • How to implement mapbox in nextjs in latest version of ...

      • 1 Answer

    Explore

    • Home
    • Trending Category
      • Programming
      • Web Development
      • —Mobile Apps Development
      • —Stock Market
      • Business and Entrepreneurship
      • Blockchain
      • College
      • —Personal Finance
      • —HTML&CSS
      • —JavaScript
      • —Python
      • —React JS
      • —Node Js
      • —C & C#
      • Content and Blog
      • Careers
    • All Categories
      • Go to All Categories
      • Health
      • —Go
      • —Flutter
      • Digital Marketing
      • —APIs
      • Devices and Gadgets
    • Find Job and Internships
    • Points and Swags
      • Badges and Points
      • Ask Mitra Swags
    • All Blogs
      • Add New Blog !
    • FAQs
    • Community Members 💓
    • Questions
      • Un Answered
      • New Questions
      • Most Seen Questions
      • Most Answered
      • Trending Questions
    • Tags

    Footer

    Ask Mitra

    Ask Mitra

    Ask Mitra is a social question and answer engine that will assist you in forming a community and connecting with others. Talk about programming, your career, your mental health, and your personal finances. ❤️‍ Post a query and receive responses ✅

    Quick Navigation

    • Ask a Question
    • Home
    • All Categories
    • Find Jobs
    • Points and Swags
      • Badges and Points
      • Ask Mitra Swags
    • Blog
      • Add New Blog !
    • FAQs
    • Community Members 💓
    • About Us
    • Contact Us

    Legal Stuff

    • Terms of use and policy