Stop the browser from pushing everything around when I resize
Question
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.
4 answers
solution1
13 ACCPTED 2011-01-09 20:09:59
Put a fixed-minimum-width wrapper around it:
Before:
<html>
<body>
<!-- Your content -->
</body>
</html>
After:
<html>
<body>
<div style="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.
solution2
0 2011-01-09 20:09:24
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.
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).
solution3
0 2017-10-27 01:54:50
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/
<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;">
solution4
0 2023-01-12 05:32:34
Incase someone is still finding the answer
go to bootstrap.css
find style for body then add
min-width: max-content;
min-height: max-content;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.