I want to decrease the space between components (DIV mainly) from 20px to 3px or maybe 5px. I know that I need to multiply 12 columns * 60 px and then 11 spaces * 20 px and this give me 940px. Also knows about the tool from Twitter to make those changes but I tried and my styles still gettin 20px of space. Any help on this?
You mean the grid columns? The values you want to change are:
#gridColumns
#gridColumnWidth
#gridGutterWidth
You can modify them in the LESS scripts or you can download the entire package with the variables already customized.
Related
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'm trying to use the skeleton framework but I'm getting confused. Here is the code I'm trying to use:
http://pastebin.com/ZcEAed0D
I even tried adding alpha and omega to the beginning and end of the columns. But what I am left with looks like this:
http://imgur.com/En3QLA5
You see the sixteenth column is hanging off of the end. Shouldn't it be able to fit 16 columns worth of stuff on one line?
This happens if i try other combinations as like like fourteen and two, etc. It hangs off the end of the page.
Where am I going wrong?
Also are the widths between columns adjustable, and if so how? Any good tutorials on how to use all of skeletons features? Do you do a new line of the grid just by using up another 16 columns?
Thanks.
Since you are adding a 1px border to each column div, it is making each column container 1px wider than it should be. By default, a border expands the width of the container. To fix this, you must add the following CSS property to your "div" selector which will include the border into the container width calculation.
box-sizing: border-box;
More information about box sizing: http://css-tricks.com/box-sizing/
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.
All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.
The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.
An example can be seen here:
http://dahliacreative.com/responsivegrid/
I think it may be down to the blocks floating as if you take the float off all seems fine.
I tried using display: inline-block etc, but couldn't get anything working!
Does anyone have an idea to fix this ?
This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.
Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
You can use the new css3 with colum gap and column count.
column-count:
column-gap:
Chris made a really good example with images, which is related to yours.
You can do almost the same thing with li or table or so on elements
Make sure to use prefix and doesn't work in IE less than 10
http://css-tricks.com/seamless-responsive-photo-grid/
When using the Grid 960 Framework in FF 3.6.14 OS X 10.5.8,
using CSS shorthand
margin: 50px 0 0 0;
cause the margins to shift down and left. All values must be long hand:
margin-top: 50px;
Has anyone encountered this,if so how and why does it occur?
You're probably overriding a different CSS value, maybe margin: x y z j or sort.
It's better to override CSS with long hand elements, so, you're good.
This is due to the fact it works on column system and it is centered within a certain width of 960px. When u add extra margins. It disrupts the floats etc because it is pushing the content out of the 960px area that is set.
You can go to the 960.gs site and then click generate css which will allow u to edit the margin and column sizes urself and redownload the template. Alternatively you could do it manually edit widths for individual divs but you may have to take away some margin/padding another element to make sure it does not excede the 960px for each row on your site
I wonder how Blueprint CSS work -- does it use some standard dimensions (such as 24 columns with 40 pixel width, or 20 columns with 48 pixel width), and is there usually a file that specifies the specifics of the blueprint settings?
The official quick start tutorial details out the dimensions as:
By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.
There's also BlueCalc which allows you to generate your own grid.css file with specific column widths, gutters, etc.
The column widths are can also be modified manually by modifying the grid.css file in the BlueprintCSS package. The span-1 to span-24 classes each have an absolute width set (though using BlueCalc is a bit easier to visually see the changes you are making).