+ 15

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

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.

8th Feb 2020, 1:00 PM
InfinityAJ
InfinityAJ - avatar
12 Respuestas
+ 12
To make responsive website use @media attributes.
8th Feb 2020, 1:04 PM
A͢J
A͢J - avatar
+ 9
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
8th Feb 2020, 1:41 PM
Farhan
Farhan - avatar
+ 5
Use Bootstrap
8th Feb 2020, 1:10 PM
Chetali Shah
Chetali Shah - avatar
+ 5
Use the vw and vh (viewport width and viewport height) units instead of percent or pixels.
9th Feb 2020, 11:50 AM
Jannik Müller
Jannik Müller - avatar
+ 3
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.
9th Feb 2020, 10:39 PM
Julián Cuéllar Mangut
Julián Cuéllar Mangut - avatar
+ 2
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
10th Feb 2020, 8:20 AM
Max Fedorets
Max Fedorets - avatar
+ 2
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
10th Feb 2020, 11:14 AM
Calviղ
Calviղ - avatar
+ 1
Is it possible to create a website like Amazon. Com
10th Feb 2020, 4:27 AM
Kelly omonuwa
+ 1
Yeah use bootstrap
10th Feb 2020, 7:47 AM
SLPZfragz
+ 1
Boostrap is the easiest way to do that
10th Feb 2020, 11:03 AM
Joshua Evuetapha
Joshua Evuetapha - avatar
+ 1
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.
3rd Jul 2020, 3:57 AM
SSki11
SSki11 - avatar