How to make a website responsive? Or how to make a common website which looks good on mobile as well as laptop?

Question

Before you answer,
I tried using percentage values for items but it makes wide item look so long when used on mobile phone, what i actually want is a way to change height and width when it is being viewed on mobile phone. Thanks for your patience for reading it all. I hope a helpful and relevant answer from you.

Answer 1

To make responsive website use @media attributes.

Answer 2

You can make a responsive website with the css grid
A crash course vid
https://youtu.be/jV8B24rSN5o
Or flexbox
https://youtu.be/JJSoEo8JSnc

And used %, vw and vh for dimensions and position
"%" means percentage
vw means viewport width percentage / horizontal percentage
vh means viewport height percentage / vertical percentage

P. S: Here check these codes
https://code.sololearn.com/W3gS00IGw160/?ref=app
https://code.sololearn.com/W4CYCf5Izf4Q/?ref=app
https://code.sololearn.com/WTnC2BJ6tJKl/?ref=app
https://code.sololearn.com/WERY1LRN72N2/?ref=app

Answer 3

Use Bootstrap

Answer 4

Use the vw and vh (viewport width and viewport height) units instead of percent or pixels.

Answer 5

I think that use Bootstrap is the easiest way as you can define for each element how have to respond depending on how big is the mobile phone, the tablet or whatever, it give you different options and is not complex to learn, if you try and you have any doubt ask.

Answer 6

There is actually two ways of doing it.... 1. Way is having a meta inside youre head section that looks like this(“<meta name="viewport" content="width=device-width, initial-scale=1">”) 2. Is you do throught @media attribute

Answer 7

Use tailwind css

<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<img class="w-16 md:w-32 lg:w-48" src="...">

https://code.sololearn.com/WLicz6juQuyp/?ref=app

more information https://tailwindcss.com/docs/responsive-design

Answer 8

Is it possible to create a website like Amazon. Com

Answer 9

Yeah use bootstrap

Answer 10

Boostrap is the easiest way to do that

Answer 11

Anant Jain

https://www.sololearn.com/post/455766/?ref=app

Answer 12

Responsiveness is all about making the page look good in every device. Although it's not possible to guarantee 100% for every device in the world, but making sure that the sizes are perfect across the most commonly used platforms will just be enough.

You can use CSS flex or grid, bootstrap, tailwind, etc. for doing this without the need to mingle around any complex sizing calculations.

In my opinion, bootstrap will be the best choice, as it is a very popular CSS framework, has a great community, is really very easy to use and is compatible with a large number of browsers. You can learn it on YouTube.

Also, I'd suggest you to go through the various links and tutorials given in this thread by many geniuses, to learn even more and master responsiveness!
Thank you.