I would like to create a simple fluid layout whereby 4 columns of Equal width, drops to 3 columns of Equal width once the viewport is below a specific width, and then to 2 columns of Equal width at a further specified viewport width. When a column falls away, it should drop to the next line, thus display below the original columns.
Any pointers or a simple fiddle with colored divs on how to achieve this would be most helpful!
Thanks Devin
You can set the column (div) widths with your CSS, but you're going to need javascript to do the part where it switches to 3 or 2 columns when the window is a certain width. CSS alone doesn't have that kind of logic built in.
A general example: http://dabblet.com/gist/2996934
Check out this holy bible sample
If youre willing and able, see how new standards will make progress in css column-count:
http://1plusdesign.com/articles/the-future-of-newspaper-column-style-layout-with-css-3/
Thanks for all the useful pointers given. Here's is an easy fiddle illustrating how it can be acheived: jsfiddle.net/Paulie_D/QFhh9
Related
A webform I am customizing has 9 elements in a composite. Since there are too many of them, the composite is exceeding the fieldset you will see below.
This is the picture of the composite
I would like to shrink the size of the composite and adjust the widths of some of the elements (like Amount since it shouldn't take that many space, and maybe make Type element wider).
I followed along this solution but the size would not change even when I added
wrapper_attributes:
width: 20%
Does anyone have experience with adjusting the widths of composite's elements ?
P.S. To be visual-friendly, here is where I added the code above
Other Idea: Change in CSS padding, margin or border-line.
On the homepage of staterequirement.com I have a group of buttons, one for each state. The site is built on Squarespace.
Squarespace gives you three "button sizes," each with their own CSS properties. They all, however change the size of buttons based on the amount of text.
When placing all of the buttons in columns, they look very wonky, because they are all different sizes, and run into each other.
My goal is to have these five rows of buttons fit together in straight columns, and all the buttons the same size.
I thought of making all of the buttons into images, but that would take away the hover effect that the buttons have.
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large
{ width: 100px}
This has been suggested to me, and it does make all of the rows buttons the same size, but it cuts off "Massachusetts", and the columns are not evenly spaced.
I think the answer is a combination of the code that was offered to me, and a padding change.
Please help!
P.S. -- If there is a better solution, to this issue, I am absolutely open to hearing it.
The following CSS will help you achieve what you're looking for. Besides decreasing the padding and font size in order to make all the buttons more compact and a single-line high, it makes use of the min-width property. This makes all buttons that are less than 130px wide to be made to be 130px wide, which is around the width of the longest button in the set (South Carolina I believe).
.sqs-block-button .sqs-block-button-element--medium {
padding: 14px 18px;
font-size: 11px;
min-width: 130px;
}
As mentioned by Serge Inácio, you have an additional problem in that you're attempting to divide Squarespace's 12-column grid into 5 columns, which it will not do equally (it is a column-based system, even if it doesn't feel like it). Therefore, consider using 4 columns instead. With 4 columns, you may then be able to adjust the values in the above CSS upward a bit. You may also notice that at certain widths, buttons in adjacent columns overlap one-another. Going to four columns may help this as well, but if it doesn't, it should at least make the problem easier to fix.
I see you use diferent col sizes in your code: 3 x col sqs-col-2 span-2 and 2x col sqs-col-3 span-3 Having a total of 5 columns, if you reduce it to 4 columns you will have more space (i.e. 4x col sqs-col-3 span-3) and add the code that was suggested to you. if it still cuts off you may be can split it into 3x col sqs-col-4 span-4 or make the font a little smaller.
Hope I helped a bit :)
Regards
I use Bootstrap 3 grid system to create a div based table.
Here is my code on jsbin:
http://jsbin.com/iWoLewu/4/edit?output
As you see the height of product column and other column is different.
Edit: I don't want fixed height also I want link for entire table row except one column. please see above jsbin code first.
Thanks for your attentions.
try to fix height like that
.myCell{height:80px;}
Of course 80px is jsut an example put the value you need/want.
I am creating a webpage off of this bootstrap model. The problem I am facing, and what I cannot figure out, is why the two companies inside the span10 class do not take up the entire row?
The easiest way to understand this would be to first look at this fiddle. Then, do an inspect element on the company row. Notice that the span10 div is taking up the correct width (its going to the end of the page). However, the two span5 divs inside of that should be taking up the entire width inside the span10. At least, according to my understanding of the bootstrap scaffolding, they should be. (I may be mistaken). In any case, they are not taking up the whole width as I believe they should.
The CSS in the fiddle is copied straight from an uneditted bootstrap file. So the css should not be the problem (with version 3 coming out, I was having trouble pulling from the bootstrap server).
Also, the problem is not (I dont think) having a row within a row, because if you look at the bootstrap example page I provided, that is what they are doing and it is working for them :).
If it is unclear what I am asking, please ask questions and I will reply promptly!
Thanks
Bootstrap uses a 12-column grid layout, so use .span6 if you want two columns to take the whole width of the row. Every new row inside a column will be treated as a full 12-column grid.
I'm currently working on a CSS three column layout (http://jsfiddle.net/methuselah/rCtGd/) and I wanted to ask several questions:
1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2. This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?
2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.
Thanks in advance.
Answers for your valid questions! :P
10px gap is not found on the jsFiddle because, they use CSS Reset. The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
For getting a good idea about CSS Fluid Layouts, please refer the links below:
The Perfect Fluid Width Layout
2 And 3 Column Fluid CSS Layouts
Do you have any clarifications still? Let me know in the comments! :)