6

Operation System: Windows 10
Screen resolution: 1366x768

I'm trying to make the browsers even smaller in width, but they won't let me pull more to the side than this amount below, Google Chrome on the left and Firefox on the right. Is there any way to remove this block and lessen more than that?

Note: My problem is screen space on my monitor, so I needed to be able to shrink a little more the browser's.

The idea is to increase this black space between browsers and have more freedom to adjust the width without blocking the minimum.

enter image description here

Improve this question
10
  • 1
    What device/operating system? Edit tags. Maybe they are alergic to each other! Commented Aug 2, 2021 at 17:12
  • Ok @StainlessSteelRat, is Windows 10 mate! Commented Aug 2, 2021 at 17:27
  • 1
    Edit your tags! Commented Aug 2, 2021 at 17:27
  • Edited and added Windows 10 in tags, thanks for the tip @StainlessSteelRat ! Commented Aug 2, 2021 at 17:29
  • Not exactly what you asked, but you can make the viewport smaller by using the Responsive Design mode: firefox, there is an icon at upper right in the dev tools (right+click > inspect) (or use ctlr+shift+m). This will allow you to set the viewport width to e.g. 300. Useful for mobile previews. Chrome has this too, but not sure about the key-chord. Does not affect min width of the application however. Commented Aug 5, 2021 at 21:21

3 Answers 3

Reset to default
6
+100

You may cause both Chrome and Firefox to open a reduced window by launching a narrow adjustable browser window from JavaScript.

Here is the HTML page you could use:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

This will display a simple page with a link named "Open!". Clicking on the link will open a new browser window that can be resized more than the usual browser page.

In my experiments, I managed to reduce Firefox to a width of about 290 pixels. Chrome I managed to reduce to about 200 pixels.

Another method for Chrome is to use the extension OSX Resizer.

Clicking the extension's icon will reopen the current page in a new adjustable window that I managed to reduce to 176 pixels.

Still another method for Chrome is to use the Developer Tools and dock them to right.

The docking is done by opening the Developer Tools and clicking the three-point menu icon:

enter image description here

Once the Developer Tools are docked on the right, you may drag the in-between separator to resize the page that is displayed on the left.

The minimum I managed to reduce it this way was to 150 pixels.

Improve this answer
1
  • I like using Developer Tools, docked to the right of the main window, for testing my website page widths. I can adjust to any width. However, other options are needed to support the OP's use case. Commented Dec 18, 2024 at 12:31
2

I can't tell how small your browser is from the screenshot but I use tool like DisplayFusion which let me split my ultrawide monitor into a few virtual screens. With that, I can then press a hot key and moved Firefox into that small screen and it resize automatically. I believe that is a way to squeeze it in.

Another tool I use is Divvy, when triggered, shows my screen in grid and I move my mouse to draw a box to indicate a screen resize size that I need. I can make Firefox really tiny with this.

Picture below is taken from the 27" monitor, not an ultra-wide and you can see how small the Firefox window is. enter image description here

I haven't tried this but, in theory, it should be the same - you can install Windows PowerToys which come with an app called Fancy Zone which allows you to create zones around your screen which you can then drop an application into it by pressing SHIFT and dragging you app into the zone. This will automatically resize your application into the size of the zone which you predefined.

Improve this answer
2
  • 2
    Hi @ringgit malaysia As soon as I get home, I'll take the test in the three options to learn and analyze if it solves my problem, thanks in advance for the help! Commented Aug 6, 2021 at 1:36
  • 1
    Good luck. Perhaps you can try Power Toy option first since it is free. Divvy has a trial, if I am not wrong but it is not expensive if turns out useful. DisplayFusion could be a bit pricey but, this is a tool you definitely need if you have multi-monitor setup. Commented Aug 6, 2021 at 1:43
2

In Firefox, you can use userChrome.css to override the minimum width.

  1. Go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
  2. Find your user profile. The folder should be named something like 30t5gfdj.default-release or 30t5gfdj.default.
  3. In the user profile folder, create a folder named chrome. In chrome, create a file named userChrome.css. So the full path should end with something like Mozilla/Firefox/Profiles/30t5gfdj.default-release/chrome/userChrome.css.
  4. Once userChrome.css is filled in, restart the browser to apply the changes.

This is the contents of my userChrome.css file:

@namespace html url("http://www.w3.org/1999/xhtml");

:root {
  min-width: 1px !important;
}
Improve this answer
1
  • Does this fix have a Chrome counterpart? Commented Dec 20, 2023 at 8:00

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.