0

I was doing multiple things on this pen, and at some point I realised that I cannot horizontally resize this page below a certain px value. I don't think I have explicitly set anything like that. Why is it happening? Usually, the ways to set a maximum width would be 

.x {
    min-width: 150px;
}

I have not actually done any such thing. https://codepen.io/that_is_just_wrong/pen/pegRQz

vc669
  • 561
  • 5
  • 16
  • 1
    I tried resizing it, it resizes for me,even to the smallest the browser can provide. – Carl Binalla Mar 02 '17 at 11:10
  • What browser are you using? And how is the behavior different in other browsers? – Johannes Filter Mar 02 '17 at 11:10
  • 2
    Having many tabs opened, can make your browser be constraint at certain width in order to display opened tabs in a readable way.Try same page in a single window(tab) – Dinca Adrian Mar 02 '17 at 11:10
  • @DincaAdrian was spot on. I tried closing website one-by-one and the allowed minimum width kept changing. I didn't know individual widths on tabs affected the whole browser! Can you add your comment as an answer so I can close the question? – vc669 Mar 02 '17 at 11:24

3 Answers3

1

As @Dinca Adrian has noticed, the min-width of your browser depends on the amount of open tabs. Try closing some of them or open your site in a new window and check if it helps.

Plenarto
  • 639
  • 3
  • 16
1

As state in my comment, the number of tabs in a browser window influence the min width of the window. The browser will keep a minimum width for each tab so it can be clicked and seen as present. As a solution is to try test your site with a window and your site being the only tab there or if you use Chrome, inspect the page, switch to Mobile view(Ctrl + Shift + M) and you can have your own "resizable" window. Same goes with Firefox (Ctrl + Shift + M directly from page).

Use the predefined resolutions or use custom ones that you can create. Hope It helps.

Dinca Adrian
  • 1,190
  • 11
  • 21
0

Internet browsers all have a minimum width under which they cannot be resized. You can read more here regarding Chrome Browser doesn't scale below 400px? and other browsers have limitations as well. Does this help?

Community
  • 1
  • 1
L L
  • 1,440
  • 11
  • 17
  • However, you can circumvent the 400px issue by opening dev tools, dock it on right and then move the separator between the view and dev tools to left. That lets you go down to 147px. Just relevant to this. – NotJustin Mar 02 '17 at 11:13