Hello people, i need a code so when someone join my site, the site resize after the size of the screen on the computer joining.
cause i have seen my site on a small screen and big screen but they look VERY different...
so if the site could resize so it would be same in every screen that join the site, i would be very happy.
please help

Dani AI

Generated

and are on the right track: avoid fixed pixel widths if the goal is a layout that adapts to different screens. Percent-based widths help, but they only solve part of the problem. Percentage heights only work when a parent has a set height; that is why saw inconsistent behavior. Modern, practical additions are the viewport meta tag (for mobile scaling), fluid images, and using max-width or layout systems (flexbox/grid) so content stretches and caps sensibly.

A few practical snippets that are not in the thread:

<meta name="viewport" content="width=device-width, initial-scale=1">
img {
  max-width: 100%;
  height: auto;
}

Use a constrained container to avoid overly wide lines on large screens (for example, max-width with automatic horizontal margins), and consider min-height with viewport units (like 100vh) or a flex-column layout for consistent vertical sizing when needed. Add media queries to change layout at breakpoints rather than trying to force every element to scale smoothly.

Troubleshooting tips: open browser devtools and emulate smaller viewports, search styles for any remaining fixed pixel widths or large images, and check computed sizes for overflowing elements that cause horizontal scroll. For concise, reliable references on these techniques see MDN: Viewport meta tag and MDN: Responsive design basics.

Recommended Answers

All 8 Replies

Well, there isn't a special code for this. It is the way your site is build. If you use fixed sizes for divs or tables than your site will always be the same size no matter what screen you use.
But if you define the with of your divs (and all other elements that have sizes) as ...% it will automatically take the proper size, that is, the size of the screen you are using.

With the size of the screen I mean, the inner-size of the browser window. And when the browser is set to full screen, the site will be adjusted accordingly.

so if i use 80% instead of 600px it will correct size automatic?

Yes. Take a look at the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
  <div style="width:600px; height:200px; background-color:yellow;"></div>
  <div style="width:60%; height:200px; background-color:red;"></div>
</body>
</html>

If you resize the browser window, notice that the yellow box stays as it is, but the red one will resize automatically.

ok that sounds great
but why is the height not in %
??

ok that sounds great
but why is the height not in %
??

We all hate a scrollbar at the bottom of the page (left/right scrolling), but we don't care it there is one on the right site (top/down).
If I remember right, some browsers don't know what to do when you define the height in %. But you can always try, just change the height from 200px to 40%.
Firefox 3 under Linux knows what do and will display the red box properly.

that sound good.
i will try it and report back in a few days.

in the css file, you should use % width instend of px, like:

width: 90%;

not

width: 900px;

in the css file, you should use % width instend of px, like:

width: 90%;

not

width: 900px;

Thanks for repeating my answer. Anything new to say?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.