What sets lower limit on page width? RRS feed

  • Question

  • I am doing some testing as part of figuring out if I can make my site mobile-friendly.

    To this end I have created a test page with nothing on it but a bit of text here:

    I figured I would be able to make the viewport really small, but to my surprise, I seem to hit an artificial limit, which seems to be dependent on the browser.

    In Firefox I can shrink it to about 306 pixels wide

    In Chrome it will shrink to only about 343 pixels.

    What is setting this limit?  Why can't I  shrink the viewport smaller? I expected to be able to keep shrinking the viewport until only I hit the length of the longest word.

    ClarkNK, A.K.A. HomePage Doctor -- Database Tutorials -- Created with Expression, VWDExress, SQL Express, and ASP.NET
    Arvixe -- My favored web host

    • Edited by ClarkNK Tuesday, June 9, 2015 5:10 PM
    Tuesday, June 9, 2015 4:51 PM

All replies

  • I suspect it's just the browsers' minimum chrome (menu/icons/etc.)    It doesn't matter.  Just set the min-width to 300px.  Nothing will need to be more narrow than that.
    Wednesday, June 10, 2015 12:43 AM
  • I don't know if this will help but I have found a grid layout system helps.  The one I like the best is Foundation grid (free).  It is setup to adjust for various widths. 

    Zurb Foundation

    • Edited by mogulman52 Thursday, June 18, 2015 4:14 PM
    Thursday, June 18, 2015 4:11 PM
  • He's asking not about how to make the page small (or responsive), but what makes a browser unable to go any smaller than a certain width (i.e., IE 9 will go no smaller than 250px, Opera 30.0 will go no smaller than 500px, etc. on my computer with my settings).

    A horse walks into a bar. The bartender asks "Why the long face?" "Because I was born into servitude and when I die my hooves will be used to make glue." It was at this point that the bartender realized he would not be getting a tip.

    Friday, June 19, 2015 3:35 AM
  • In Firefox, for example, you can go to the browser default settings (type in this chrome://browser/content/browser.css).  The min-width is set here.  You can override this by updating the userChrome.css file located in the user's chrome folder.  As far as I know there is no way to change this in a webpage css file.
    Saturday, June 20, 2015 3:31 PM
  • Frankly, there is no reason to worry about the browser's own width minimum at all.  No one will use that width in a PC browser.   The case where a minimum site is just over 300px is for phones.   The question is moot and doesn't need an answer for any practical use.
    Saturday, June 20, 2015 8:54 PM