Member Avatar for cguan_77

hi guys, is there a way to auto resize the width to fit the screen? is it possible?

  • 10 Contributors
  • 10 Replies
  • 7K Views
  • 5 Years Discussion Span
  • Latest Post Latest Post by Banyak

Dani AI

Generated

Auto-resizing to the screen is less about forcing 100% width everywhere and more about building a fluid, readable layout that adapts without causing horizontal scroll. A practical pattern is to let elements grow with the viewport up to a sensible limit, add gutters, and ensure borders/padding don’t push boxes beyond the line. Modern CSS gives you precise tools for this: logical sizing properties (inline-size), math functions (min(), clamp()), Grid/Flexbox for structure, and small safeguards to prevent overflow (e.g., overflow-wrap).

Example you can drop in today:

/* Prevent padding/borders from causing overflow */
*,
*::before,
*::after { box-sizing: border-box; }

/* Page container: fluid until a comfortable max */
.page {
  inline-size: min(92vw, 72rem);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Responsive layout without fixed widths */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 60rem) {
  .grid { grid-template-columns: 1fr 2fr; }
}

/* Long words/URLs won’t break the layout */
.wrap { overflow-wrap: anywhere; }

/* Wide tables or code blocks stay usable on small screens */
.scroll-x { overflow-x: auto; }

/* Media scales with its container and keeps aspect ratio */
.media {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover; /* or 'contain' for letterboxing */
}

This keeps content fluid on small screens, caps line length for readability on large screens, and avoids common overflow traps without relying on deprecated attributes or rigid pixel widths.

Recommended Answers

All 10 Replies

Member Avatar for ravi_9793

you can use:

width=100%
Member Avatar for Member #360561

you can use:

width=100%

To fill the screen you must also maximize the window.
Who would ever want to do that? :)

Member Avatar for MidiMagic

The width attribute is deprecated. Use a style:

.wfl {width: 100%}

Then, in the tag you want to be wide, put the following:

<tag class="wfl">

The tag will assume the full width of its container.

Member Avatar for cguan_77

thanks MidiMagic i'll try it out :)

Member Avatar for MJ Pieterse

i would suggest that you float your tables on 100%. the main advantage on using percentages is that you would style the sheet according to most people's screens. visit sitepoint.com for more info on styling on CSS. they have a huge selection on books for you to sort your problem.

Member Avatar for Trapped

Indeed to have a fluid layout you will have to use % to determine the width instead of pixels.

Member Avatar for Member #117553

Actually <div> element is 100% stretched by default, unless contained in another block element with fixed widht, or unless floated. So, if you are using div's and do not use neither float, nor width properties, they will be still 100% wide.
Now, what is your goal so we could help more?

Member Avatar for churro89

These might help:

and CSS:

max-width: 100%;
Member Avatar for Mona3

Good subject!!

Member Avatar for Banyak

thanks guys, the css max-width: 100%; works!

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.