Is there a way to increase the width of the Bootstrap 3 grid to beyond 1170? My users often use devices that support 1920 x 1080 resolution. I want to maintain the responsiveness (in case the window is not maximized) but whenever the window is > 1600px in width, I want the grid system to be as wide as 1600px.
Is there a way to add another "step" to the grid system for windows wider than 1600px? Preferably without using LESS, just by adding some Custom CSS to override original Bootstrap rules?
Allow me to answer the question myself. I needed to change my search keywords to find the answer. It was mentioned in this issue on Bootstrap's GitHub issue tracker (last comment). It is a CSS file called BootstrapXL which basically adds a new "x-large" grid level to Bootstrap 3 for devices beyond 1600 px in width (i.e. Full HD monitors with the window maximized).
Related
how can I set a minimum size in an universal app (win 10) for the application window? in my project I have only object with Page tag, not Window. I want that the screen of the application can't be resized less off a certein value.
thanks a lot
In the Package.appxmanifest of a Windows 8.1 Universal app, you could set a minimum width, to one of 3 pre-defined values. Setting minimum values on your page will not prevent your application from resizing. Setting maximum values will not prevent resizing either, but it will result in black borders when the application frame is larger than your set dimension. It's worth mentioning that 320 px is the absolute minimum width on 8.1 and on Windows 10 (for phones).
In Windows 10 UWP this property is no longer available. You should AdaptiveTriggers to handle your UI layout on Windows 10.
If you want to check the minimum resize dimensions, keep the scaling of your pc in mind. My laptop scales at 125%, a screenshot of the minimum dimension for the desktop client is 627x441 (~500x350 at 100%) including the space used for the app bar. But it's more common to just use AdaptiveTrigger and 720 pixels as the cut-off between phone and tablet.
you are working on a universal app, you shouldn't set a minimum width . It should be working on every resolution and device.
you should instead use visual state manager and adaptive triggers.
best of luck !
I'm using a tiling window manager i3 to run selenium tests. Sometimes I run tests using Chrome & Firefox besides PhantomJS. I realize that one cannot resize an i3 window that's tiled, so I wonder what, if any, workarounds are there to resize window, or detecting if the window is currently tiled and setting it floating?
I realize that one option would be setting chrome and firefox to always run floating in i3 config, but that would impede my regular workflow.
You actually can resize tiled windows, either with the mouse or with the resize command:
resize <grow|shrink> <up|down|left|right|height|width> [<px> px [or <ppt> ppt]]
This grows or shrinks the window in the given direction. With the optional parameters you can specify by what amount the window should be resized. The first argument - <px> px - is used for floating windows and defaults to 10 px. The second argument - <ppt> ppt is for tiled windows and gives the amount in percentage points of the parent container, it defaults to 10 ppt.
In the default configuration there is a resize mode that can be reach with Mod+r (with Mod being either Alt or Super, depending on the choice when first starting i3). While in this mode, windows - floating and tiled - can be grown with Down or Right and shrunken with Up and Left.
For example: Say, you have a container with 3 equally wide windows side-by-side - each taking 33.33 % of the containers width. If you run resize grow width on the middle one, it will be resized to take 43.33 % of the parent container, while the windows to either side will be shrunken to 28.33 %.
As for setting a window to floating, you can always do that with the command floating enable, so there is actually no need to query the current floating state.
If you really want to, you could query this information from i3's IPC interface.
Proof of concept:
Use i3-msg -t get_tree to retrieve the JSON-encoded layout tree (this gets you the whole JSON in one line, so maybe you want to put it through json_xs, json_pp or some similar program for more human-friendliness).
Get the ID of the current window with xdotool getactivewindow
Look in the tree for a node with attribute "window": <WINDOWID>
Check whether the attribute "floating" is set to "user_on" (or possibly "<ANYTHING>_on", I am not sure about that)
I just got to test IE10 on a Surface Pro with 1920*1080 display resolution where "make text and other items larger or smaller" has been set to Large.
On my website I have added the CSS+JS viewport fix in addition to the viewport meta tag, all asking for width: device-width (plus I added a "min-width: 320px;" to the #-ms-viewport definition to ensure it never gets smaller than that).
I added some javascript to display the value of window.screen.width and $(window).width to see what the browser ended up using for viewport in IE10, and to my surprise the screen size of a 1920*1080 resolution display was reported as 1280x720!
Now, I can live with with that (just like small phone screens report 320px width no matter their actual resolution, since it is a good size to make stuff human readable across devices for the same font size), but when the 'Metro IE10' is snapped to the side of the screen, the problem comes: IE10 tries to make a 320px rendering of the website, but it zooms in so the right side of it is hidden.
I tried Microsofts own test page: http://ie.microsoft.com/testdrive/Graphics/MakeItSnappy/
It does the same thing - on the Surface Pro the right side is hidden, and you need to drag left/right to see it, and you cannot even zoom out to view the full width!
But when trying the same thing on my laptop with a 'normal' 1366x768 display (rendered as 100%), the snapped IE10 display has the perfect size.
Ok, I guess this is a Microsoft Windows scaling bug - but my question is: Has anybody else experimented with changing the "make text and other items larger or smaller" to 125% or 150% and making websites adapt correctly?
Check out this fix from developer Matt Stow
http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
I've been looking all over the place to find the solution to this but haven't had success. I have a Sketchflow project and I want to scale every Screen to the browser resolution on running, as in scaling every element of the current Layout to fit the screen.
Do you want the objects themselves to get bigger to fill the screen or to spread out? For objects to get bigger you can wrap the whole thing in a ViewBox.
I am designing a simple music app where the user gets to play instruments i.e. Drums, and the problem that I am facing is with resolutions.
The drums are images, which I have converted them into buttons. Everything looks great at the state that I have designed it.
However, when I switch to other resolution states, the button(image) are distorted, e.g. skewed, scaled, and looks nasty.
I have tried designing or arranging them via selecting 'Enable state Recording', but the specific designs for that state are not being saved.
Have you tried the approaches discussed here? http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx For the actual button sizes, make sure you are not fixing the width/height with pixel values. Use * weighted rows and columns to layout your grids and have the buttons autosize to fill a given cell in the grid. Then match with the appropriate image resource per the article.
Grids are great for dividing up available space but they can't account for changes in aspect ratios. If your items are still set to Stretch (or Fill) then they can end up out of aspect ratio. Another option is to design the entire layout at a fixed size (let's say 1024 x 768 or 1366 x 768) and wrap the entire thing in a ViewBox. ViewBox will scale all elements equally and maintain the aspect ratio, adding letterboxing (or empty space) on the sides / top & bottom if necessary. This might be a better approach for a drum kit.
Hope that helps.
Redid the whole project of designing again.
This time, I put the image inside a specific grid and that made things lot better. :)