is it possible to make the the root div (container) 100% of the document?
here's my code:
<div class="container" style="width:100%;">
<div id="topbar" class="sixteen columns" style="background-color:green;">topbar topbar topbar topbar topbar topbar </div>
</div>
thanks
The power of skeleton comes up in the columns that behave responsively. So same as bootstrap; here is a container class . container which will limit the width. So if you want to fix the width; use this class.
Note: The class .u-full-width is just a utility class shorthand for width: 100% -->
Skeleton uses 12 column grid with maximum width is set to 960 pixels. Its columns are added within a container or row similar to bootstrap. The column should be immediate child of the row. Columns are defined by adding classes like “one column” , “two columns” to elements.
I know this question was asked ages ago but Skeleton has utility classes for this.
Basically add the .u-full-width
and .u-max-full-width
classes to any <div>
with class .container
.
Just make sure it's on the <div>
element with class .container
, as it doesn't seem to be meant for the <div>
elements with .row
or .column
classes.
You'll need to create your own container class. I don't know what the css for the skeleton responsive platform looks like off the top of my head. I use one called Columnal, I know it is similar, so it should be something like this...
.full-width-container {
width: 100%;
max-width: 100%;
clear: both;
margin: 0 auto;
}
The normal css should be something like .container { max-width: 1140px; width: 100%; clear: both; margin: 0 auto; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With