Prevent auto resizing

So the window is always trying to resize my codepen. It messes it up completely. Is their anyway i can prevent this, and just have it stay the same size, but someone on mobile would have to move their screen around. I much rather have it so it scales down depending on screen size, like using transform: scale() or something. Like this —>

–Theirs not much background images for night time, so you’ll have a white background.

I already tried min-width but it didn’t work. Here are some images on how it gets messed up depending on screensize.

My codepen:

How it should look:

How it shouldn’t look


Hi @John-freeCodeCamp,
maybe you can read this:

Im on Bootstrap 4…

The reason it’s showing like is because on your #main div, you have an inline style where you set the margins as percentages of the screen width. And so no matter what the device width is, those margins will always take effect … i.e. 12.5% -25%, 4%, 25%.

** I’m a bit confused about your margin values… I’ll look at that next.

what you need to do is use @media queries so you can implment a different set of margin values for smaller screen sizes.

But it will still mess it up. I tried changing the width depending on screen size using media. Plus i don’t want to change the margins, i just want to keep it from auto resizing. That still wouldn’t do anything to use px, as ill just add 25% worth of pixels.



<div style="min-width: 1920px; margin: 0 auto; max-height: 1080px;"> <!-- your content --> </div>

In your body to surround all your elements keeps the HTML from resizing most of the times. Between 575 - 990 width it try’s to resize?