Stop The Browser From Pushing Everything Around When I Resize

February 10, 2024 Post a Comment

How can I stop my whole site from falling apart while a user is resizing the browser window? The site looks perfect - it only gets all mangled when it is resized to a smaller size.

Solution 1:

Put a fixed-minimum-width wrapper around it:

Before:

<html><body><!-- Your content --></body></html>

After:

<html><body><divstyle="min-width: 960px; margin: 0 auto;"><!-- Your content --></div></body></html>

This will ensure that your page is always displayed as at least 960px minimum width (and will create a horizontal scrollbar if the browser window is narrower).

You may also choose to use width instead of min-width, if you want your page to always display as a certain width even if the browser is wider, too.

Solution 2:

Force a fixed size instead filling the available space. This will let your website always "look perfect".

The downside: Users with smaller resolution setting or who size the browser smaller will have to scroll left to right on your page. Also users with large widescreens will see a bunch of extra space on the sides.

Baca Juga

Real solution, change your styling to allow the page to still look decent when sized smaller (down to whatever size you think your users will typically be at).

Solution 3:

I know im very late, but this now has really helped me, so thanks:)

What i used it on: https://codepen.io/Mike-was-here123/full/oGWxam/

<divstyle="min-width: 1920px; margin: 0 auto; max-height: 1080px;">

Html5 stackoverflow Examples