I would like to know how I can adjust the .row width of Bootstrap, that the col grid still work as used to, but just particular .rows are tighter as in default.
Thanks
To adjust the row width, you can add the following statement in an internal style sheet: .row {width:90%;}, where you can replace 90% with any percentage value desired. This will still preserve the grid layout and responsive design while giving you control on the row widths.
Related
Even though I am know Foundation is responsive, I am trying to craft precise photoshop documents with certain breakpoints and trying to understand how foundation establish the grid elements sizes (by default).
Let's say for example a media query of // XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */ 12 columns
Question1: are the gutters applied by default? or the by default the system applies no gutters, just pure columns?
Question2: does foundation applies outer gutter (or outer margins) automatically?
Question3: what is the total width for a non full-width row considering screensize of 1920?
Question4: what are the sizes of the columns, gutters in this case of screen width of 1921?
Question5: how should I prepare my document if I want to follow defaults with the new XY grid?
In addition to the documentation info that was uncovered, I found out more information on the new XY Grid by contacting Zurb:
The XY Grid is the Default grid in 6.4+
No gutters by default. Cells can get spacing in the form of margin or padding
If you add spacing between cells, it will apply on both sides of each cell.
The default width of the grid-container is 1200px. This can be changed easily. You can create a grid that is fluid width as well.
Cells are a % of the grid container or the screen width. So if you have 4 cells in a grid using the medium-3 class, each will be 25% of the width. You can also have cells be auto or shrink size. Shrink will take up the width of the content inside, and grow will expand to fill remaining space.
Find answers to all your questions by reading the Foundation for Sites 6 Docs >>
Here is what I want to achieve with Polymer Elements:
Polymer Structure
The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.
I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.
Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.
I would be very thankful for a codepen (or similar) example on how code and result could look like.
Update: I found the solution here: How to control number of items per row using media queries in Flexbox?
You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.
I have a container of rows that I'd like to make the container bigger. By default, bootstrap has it at 1200px. I thought that by changing col-md-4 to something like col-lg-4, it would expand the grid but it doesn't for me. Is there a way to expand the grid?
If you don't want to mess around with less variables and just want to increase your container size...make sure your custom css style sheet is called after your bootstrap css so that it isn't overridden and then use a simple css markup in your style sheet such as
#media (min-width: 1200px) {
.container{
width: 1400px;
}
You could even use min-width/max-width properties, or as benja pointed out you could also use container-fluid to maximize your container to the full width of the viewport.
You can use <div class="container-fluid"> for a container that will take the full width of your viewport.
Go to the Customize menu on Bootstrap website and choose your preferred size. In Less Variables -> Grid system you can find a form to input your preferred sizes. Then you can easily download the preferred grid. Hope this will help.
The middle term in col-XX-num corresponds to the screen size that will cause a "break" in your grid so that the items in the grid are responsive. For example, a div with a class of col-sm-4 will take up 4 of the 12 grid cells in a default Bootstrap row until the "small" screen size is noted (in Bootstrap "small" is defined as 750px). Read more about the Bootstrap grid.
If you want to change the width of the Bootstrap container, use this CSS:
.container{
max-width: 1900px;
}
This will make the container wider but will not make your grid bigger. The Bootstrap grid is locked at 12 cells per row. When you use the class col-md-4 as you gave in your example, you are telling Bootstrap to make this element take up 4 out of a possible 12 cells in this row.
Perhaps you will achieve your desired result making your columns take up less cells. Something like col-md-2 then you can use something like col-md-offset-2 to position the column within the row if needed.
Hope this helps!
I'm looking for a fluid CSS grid generator that's based a percentage width like 100%. Everything I've found so far requires a specified pixel width or min/max pixel width.
These grid generators are all pixel based: http://www.gridsystemgenerator.com/
If you want to make a grid based on a percentage width, you don't need a generator.
Just count.
If you want a column that is half of the body, make it width:50%;. Quarter? width:25%;
I made a demo for you.
However, making a design entirely depended on percentages to leads to some problems. While a paragraph might look fine with width:50%; on your screen, someone with a huge monitor might see that entire paragraph on one line, which would be obnoxious to read.
I would recommend The 1140 Grid. It's based on pixels, but is also fluid, and may suit your needs. Also, by using max-width everything will remain easy to read for everyone.
Foundation has a percentage-based grid system: http://foundation.zurb.com/
I am using Yahoo's UI Grids to structure most of my pages. One of my pages is a Google map and I need about a 400 pixel fixed left column to put map legend information into. YUI Grids however only offers 3 columns for their 100% page layouts, namely 160px, 180px and 300px.
Is there a way that I can customize their 'template 3' which provides the 300px column to get my 400px column I need?
I've determined how to do this. Kudos for Nate in the YUI forums for pointing me in the right direction.
To set a fixed left column, you need to divide the column pixel width by 13 to determine the em's for all non-IE browser's. For IE, divide the column width by 13.3333
e.g. wanting a fixed 480px width, 480/13 gives me 36.9231em for non-IE and 480/13.33 is exactly 36em for IE
Using template 3, the CSS is:
.yui-t3 .yui-b {
float: left;
width: 12.3207em; *width: 12.0106em;
}
.yui-t3 #yui-main .yui-b {
margin-left: 36.9231em; *margin-left: 36em;
}
Also, if you want to tweak margin's e.g. zero margin, you can do something like:
#doc3 {
margin: auto 0;
}
Grids is presently deprecated in YUI 3 - a bit of a shock when I saw that. There will be some browser(s) that drop off the A category in July and as a result, Grids will be reworked given that some of the initial design decisions were based on older browsers of course.
There is definitely a way. I think its just a matter of tweaking the CSS to either add in another 400px column, or modifying an existing column to fit your needs. If you are adding another column, be sure to account for the additional width (plus margin) and either reduce width on other elements, or increase the width of your containing element.
If the layout is using 100% width of the browser, width may not be an issue, but if your content is wrapped in a container element which holds all of your columns, be sure to adjust the existing elements to make up for the size of your new column.
EDIT: Also if you are dealing with 100% width layouts, its probably better to size your columns using percentage, instead of a fixed pixel size. Since the containing element for your columns will be the user's screen, if you use percentage then the column sizes should adjust relative to their resolution/window size.
If you want your new column to appear on the left of the your other columns, typically you would place it before the other columns in your markup, and apply a "float:left" property. But, take a look at how the other columns are set up in the YUI CSS, and follow their method.
I hope that helps.
Acorn