Since the default behavior of columns on extra small screens is as follows (quote from the Bootstrap site):
Horizontal at all times
I'm wondering what the point of col-xs-* is? On an xs device, the columns are gonna be stacked vertically anyway, so why bother using this kind of code?
Btw, I know that for instance col-md-6 scales upwards. But what about downscaling, so in that example, if there's nothing declared for a small screen? Is there a default as well?
It is so that you can stack items horizontally on screen sizes lower then 768px without them stacking vertically. The column's will re-size as the viewport gets smaller without breaking to the next line. If there is anything in your page that you do not want to break at a given width then it is a good time to use SX.
Related
By the way I'm using Native Base for the card components, and react-native-responsive-grid for the grid.
http://prntscr.com/kbi48m
Here's the code chunk. Basically it sets up a horizontal box (Row) that has two columns in it. Each column has one card component in it. If the screen is <= small size, the columns get a width of 99% of the screen and stack on top of one another. If the screen is big enough, both column get rendered side by side with a width of 50% each.
When in landscape view, the sizing of the Card component vertically appears normally (I manually set width of card to 100% so it takes the full width of it's container). (It's just as big as it needs to be to fit the text field inside: http://prntscr.com/kbi5q4
In portrait mode, suddenly the cards get a massive height. Much taller than the child elements need: http://prntscr.com/kbi6o7
I tried to hard code the height of the cards which works fine for either landscape, or portrait, but not both. Ive never seen a parent component give a ridiculous amount of extra spacing on one side of its child like this before.
Any insight?
I'm currently trying to make a responsive navbar (and it works, is responsive), but at some window size, it becomes too big. So I tried to use #media (max-width) to block its growth at some point. Unfortunately, when I use px to describe new fixed size, the navbar is now affected by scaling of the page (ctrl+mouse wheel), and I'm trying to avoid this behavior.
Is there a workaround to my problem?
Little hard to understand your question, but any good navbar should scale width wise for a page. I kinda sounds like you set the height style to a percentage rather than pixel amount.
<div style='height:80px;width:100%;'>Content</div>
This makes a horizontally scaling bar, with a constant heigjht
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
Content displayed in divs that are set to col-md-* display stacked and 100% width when printed. My current fix is to change the divs to col-xs-* and hope no one tries to view the page on a small device.
I need a bit of guidance on what I could add to the #print directive in print.less to make the print layout of col-sm-* to remain horizontal . I understand that the pixel width of a printed page at 72dpi is in the 540px range, so this is why the page is wrapping on col-sm-*. currently in my print css I have:
[class*="col-sm-"]{ float: left; }
Which works, but in possibly only a few cases, which meets my immediate need, but probably has unknown side effects. I already scale the font in my print css down to 96%, because it prints way too large by default vs. on screen. This means layouts that wrap on the screen would look fine when printed horizontally in the col-sm-* class, all the up to probably 11 columns side by side, accounting for page margin and grid padding for readability.
Edit: Here is a jsFiddle, but the behavior can't be replicated on there because of the way they render the html >> JS Fiddle
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope