Hey everyone 
I’m working on the last project in the JavaScript course, Build a Pokémon Search App, and I noticed that the sample project does not allow the window to be resized below a certain width.
To be clear, when I try to drag the edge of my browser window to shrink it below the width of the main container, it simply doesn’t go below that width.
How can I do this?
Thank you!
I’m thinking a min-width (and min-height) setting with a specific pixel definition would work if you do it on the body element.
Unfortunately not. It prevents the elements of the page itself from shrinking, but not the window. Once the minimum width is reached, the window can keep shrinking, and a horizontal scrollbar appears to allow you to see the rest of the content (of which you’re only seeing a small part since it remained at minimum width.)
i also saw someone discuss a meta tag that may do it:
But haven’t tried.
That doesn’t seem to work either, unfortunately. Not sure why.
You can’t set a minimum width for the window. The window size is not under your control.
You can set it on the html/body elements.
All you can do is make sure your page/app works at the lowest minimum expected size, which is 320px if you want to support very small devices.
hi Lasse, I think he’s trying to make the same effect that happens with the sample app for this project, in which you cannot reduce the browser width beyond a certain point. (you cna reduce the height though, go figure)
Not sure what you mean, you do not have control over the browser window width.
You can limit the document and elements using min values.
can you test your browser on a different page (like cnn or something) and see how small you can make it? Maybe your browser just will not shrink past that width anyway (it is not a css effect at all?)
It seems you’re partially right. I tested this on other websites, and they all stop at the same width.
However, I also tried it with the window preview function in the freeCodeCamp project editor (the one accessed by pressing the button to the right of the “preview” button in the top right of the code editor), and that one has a significantly smaller minimum width, and I’m not sure why.
Here’s a picture showing what I’m talking about:
All of these windows are at their minimum width. Google, CNN, and the sample Pokemon project all have the same minimum width, but the fourth window (the preview of my WIP Pokemon project) has a much smaller minimum width. Any idea why that is?
Thanks!
ping @lasjorg (gotta ping you here to hear your thoughts on this one)
I don’t know how browsers limits and determine their window width. If I open a blank page in Firefox and Chrome they both do it at different widths.
As far as I can tell it is related to the browser’s “chrome” as it is often called, i.e. the UI components of the browser.
The image you have posted looks odd, it is on about:blank and there is (almost) no browser UI components. I would assume that is why it is letting you narrow its window as much as it does. If you add the tabs and other normal UI components back, I would assume its limit would be larger. Basically, I assume the browser won’t let its UI overflow, so whatever is in the UI will be the limiting factor.
It will be different depending on the browser and not something you are in control of.
It also it completely depends on how you view the page. For example, with the demo project I can make the page 150px wide with the dev tools open and in device mode I can make it 50px wide. Both are unrelated to the browsers own min size.
Fascinating stuff. Sorry for taking you both on such a weird tangent. Thanks!
