How can I make a web site to automatically fit any size of screen

Answer 1

You can research responsive web design

Answer 2

2 steps:
1. Use meta tag viewport ... to make page basically responsive.
2. @media is helpful to change css to be more responsive and better show in mobile devices.

Answer 3

You can learn from the freecodecamp lessons

Answer 4

Freedom Jombo this emphasis could help you to set @media sizes for different devices.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 5

You can use media queries to make your website responsive or use bootstrap framework

Answer 6

Yes I have one

Answer 7

Try this.
<meta name="viewport" content="width=device-width, initial-scale=1">

It is always helpful to share your code bit so that community can better help you.
Use Codeplay ground to upload your code and then share the link.

Answer 8

use website builder 😁 front-end developers are always struggling to make it responsive. Some others even code template for desktop and tablet, and other one for mobile to save him/herself from horrible headaches

Answer 9

Understand media queries Freedom Jombo.
Check this out.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

Answer 10

check this out
https://www.sololearn.com/learn/1051/?ref=app

Answer 11

Well with the least effort, you can use css libaries like bootstrap or tailwind, but if you’re just starting out, learn it via css. There’s a course here on SoloLearn called responsive design, which contains the solution to your problem. Or if you want an out-of-the-box solution you can even use a cms like wordpress or joomla.

Answer 12

The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone and Android phones).

Example
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Answer 13

Hassan Krima
You may use the <video> element.

In the future please create a new post for questions that are not on topic.

Also use the search feature before asking in the Q/A.

https://www.sololearn.com/Discuss/2751058/?ref=app

Answer 14

Well, that is a tricky question. The simple answer is to use vh and vw, but this question is rather broad. Do you have a code you are trying to make responcive?

Answer 15

Ok

Answer 16

How to make a video on the site