CODEWITHSUNDEEP
htmlcssbrowserresize
anon271334
anon271334

Reputation:

Stop the browser from pushing everything around when I resize

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.

Upvotes: 11

Views: 33069

Answers (4)

BeanNil
BeanNil

Reputation: 19

In case someone still needs finding an answer:

Go to bootstrap.css, find style for body then add:

min-width: max-content;
min-height: max-content;

Upvotes: 0

Leed
Leed

Reputation: 303

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;">

Upvotes: 0

Amber
Amber

Reputation: 526553

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.

Upvotes: 12

jzd
jzd

Reputation: 23629

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).

Upvotes: 0

Related Questions