Inspired by this tutorial, I've set up a Fiddle that has 5 columns. That works fine with 5 images. With 6, however, it sorts it into 2 rows of 3 instead of one row of 5 and a row of 1. Other configurations have a similar effect.
Is there a reason for this and a way to prevent that from happening?
You should use as an additional style, like this:
float:left;
Related
I have this code, with border bottom in every row.
https://jsfiddle.net/brygom/0z582swx/3/
For some reason the border bottom of row not complete all row width. Even if i don't use overflow-auto the border not completed.
The problem is that you are forcing to use 13 .col-2 inside a unique row. In Bootstrap this is not possible because a row has a maximum size of 12, so if you want three equal-width columns across, you can use .col-4, if instead you want two equal-width columns across you can use .col-6. Here you can se in detail how the bootstrap grid system works.
If you try to substitute .col-6 to .col-1 infact, you can see that the width of the line increases. The problem is that you have 13 columns and so I think that using the Bootstrap grid system is not the better choice.
If you want to create a table I suggest you to use the Bootstrap table, in this way you can add as many columns as you want with your preferred customized style. (here you can find the documentation).
If you want to customize better the table you can use instead a normal <table>.
I'm currently having a problem trying to set to the left every sublist of the navigation bar so that it aligns correctly bellow every sublist if there is more than 6 columns, the problem happens from the 7th list. I'm using bootstrap and every sublist have a size of 2 (so from the 7th as it passes the 12 column size it moves down, as expected)
What I'm getting a result is
And the expected result is
Piece of code used per list:
<div class="sub-navigation-section col-md-2">Ul and li inside</div>
The CSS that is attempting to do the expected result is a Float:left;
Bootstrap uses a 12 column grid system so you won't be able to divide that up equally into 7 columns. You could do this by creating your own class that has a width of approx 14.285% (100/7) and the same properties as the bootstrap col-* classes (float left etc)... but remember you'll need to cater for different viewports etc
If you wont use javascript, you can alternatively use CSS3´s column-gap and column-width like in this example:
https://www.bootply.com/118335
It floats the boxes like waterfall layout. Hope this helps you.
So here is an issue:
Web sites features 4 columns with descriptions, each inside the <p> element.
The problem: since text size differs by column, some columns are shorter than the others and when using a mobile phone or a tablet, they appear like this:
http://imgur.com/DZ7YKnz
How would one solve such issue? At first I have tried the min-height attribute but since there are so many resolutions, and sometimes I split into 4 instead of 2 columns per row, depending on device, setting min height for each resolution is a pain.
Is there any other way to do that?
Site: https://www.piere.lt
A solution could be using some javacript to equal the height of all columns; there are a lot of libraries like http://brm.io/jquery-match-height/
A suggestion: use pure-u-md-1-2 pure-u-lg-1-4 to show items 2 by 2 at lower resolutions
I've been working with Susy for a while now and came across a use case that I can't seem to figure out. The best way to explain it is to use Twitter as an example.
If you look on their site you'll see they use a three column standard layout with a break point at 1250. After that point is reached, the entire right most column 3 goes underneath column 1.
How is this done with pure CSS in Susy 2? When I look at twitter it seems like they are physically moving the content from column 3 into column 1. I'm assuming this is all done with JS but id rather do it a bit more clean. Ideas?
Looks like it was as simple as using breakpoint as another mixin for my columns. I simply added
#import "breakpoint";
#include breakpoint (new screen size here) {
.right span (5 of 13);
.left span (8 of 13 last);
.middle span (5 of 13);
}
I am trying to use nth-child to target 1,6, 7,10, 13 ect. and some style. I was targeting them individually but this wont work as the content will be automatically generated.
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
What would be my best option for achieving this ?
Below is the css i am using at the min:
div:nth-child(1),div:nth-child(6),div:nth-child(7),
div:nth-child(10),div:nth-child(13){
background:#000;
}
I have 1 large div followed by 2 small divs one above the other then the next row is the opposite 2 small and one large and this is to continue as content is added.
So the same situation repeats every 6 items. Using :nth-child(an+b), you now know that a=6.
2 elements are selected for each group of 6: 1 and 6 (and then 7 and 12 (not 10), 13 and 18, etc). To select the first one, b=1 is OK. To select the 6th one, b=0 or b=6 are OK
That leads to:
li:nth-child(6n+1),
li:nth-child(6n) {
/* sth different */
}
Codepen: http://codepen.io/anon/pen/cypAn
You should use nth-child if you just want to use CSS. See this article here. There is a nice table at the bottom that can help if you are a visual learner.