Let's say I have a website which uses Twitter Bootstrap and has the responsive features included. In this example, I have a div with a picture in a div with span1 as the class, and some text in a div with span11 as the class. I don't want to display the image while the site is being viewed from a mobile phone. Here's the code I would use:
<div class="row-fluid">
<div class="span1 hidden-phone">
<img src="path/to/image">
</div>
<div class="span11">
<p>Here is some text</p>
</div>
</div>
From this example, the span1 div is hidden if the site is visited from a mobile phone, however the span11 div is still visible.
If I use this code, will the contents of span11 span across the entire width of the page (given that it's being viewed on a mobile phone), or will it still only span across 11 out of 12 spaces on the Bootstrap grid? If this is the case, how can I specify that I want the paragraph in span11 to span the entire width of the page and not just 11 out of 12 spaces as defined by the grid?
It will span the entire width.
The css of Bootstrap converts all elements with a span* class to block elements with 100% width for devices with screen width less than 767px; consequently, there's not really a 'grid' for mobile.
Here's the code that does this:
[class*="span"],
.uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
.row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
Source: The Bootstrap mobile layout .less file, line 60
Related
Is there an easy way to make a full width hero type banner using bootstrap and WordPress? I know how to do it with bootstrap and I know how to hack WordPress Templates, the problem lies when you are wanting to this within the WordPress content editor(Perhaps via short-code even).
So, if using a template in wordpress that is say 1100 px wide, but the screen is 1300px wide, simple adding a div with a background color will only extend the width of the containing element which is 1100 px wide.
How can I add a fullwidth banner anywhere in the code with any sized containing element without breaking bootstrap rules?
You could use position: absolute to break free from the containing div.
Then use left: 0px; width: 100% to use the full width of the browser.
Then, wrap your hero inside that. So:
<div style="position: absolute; left: 0px; width: 100%;">
<div class="hero-unit">
<h1>Heading</h1>
<p>etc.</p>
</div>
</div>
The problem you'll experience with this is that subsequent content will ignore this new div with regards to vertical-positioning.
A hack to that would be to add block-level content with the proper height adjustment (matching the height of your absolute-positioned div), e.g.
<div style="height:500px"></div>
I have this design layout that has a gradient background in the content container.
the gradient is a solid color on the left and right and gradient to white near the center. (horizontal gradient)
I have three images left-solid.png and a right-solid.png for extending the left and right of the content area if the viewing area is larger. I have main-gradient.png as the background for the main content and is a fixed size of 900px
Is there a way to lay this out without using a html table?
It looks like I need three columns of some sort
[leftcolumn][contentcolumn][rightcolumn]
rightcontent= can stretch and filled with right-solid.png repeat-x
content = 900px filled with main-gradient.png as background no repeat
leftcontent = canstrech and filled with left-solid.png repeat-y
any suggestions?
There are a number of ways you can achieve a multi-column layout without using tables. In fact, using tables is semantically incorrect. This very thing is one of the reasons CSS was created.
Using the following HTML structure:
<div class="container">
<div class="left">
</div>
<div class="middle">
</div>
<div class="right">
</div>
</div>
Then you could do this in CSS:
.left, .middle, .right {
display: inline-block;
}
This will tell the div's to appear next to each other. Additional CSS styles will be needed as well, like width properties for each column (preferable to use percents).
Another option for CSS would be:
.left, .middle, .right {
float: left;
}
This will also tell the div's to appear next to each other, but it does it a very different way.
A further note is that you don't need to use images for your gradient. You can do gradients using CSS. Take a look at http://www.colorzilla.com
I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.
For an example on Bootstrap website
Ctrl +F "Nesting Columns". With a wide enough window both of the Level 2 columns are next to each other, but reducing the size so they don't fit anymore they nicely snug under each other. How can I do this?
I have an almost identical layout, except I have several divs stacked and 1 sidebar floated to the right. Something like this:
<div id="container"> //Width: 96%; margin: auto; max-width: 870px;
<div id="sidebar">Sidebar</div> //Floated to the right and "width: 26%;"
<div id="box1">Box 1</div> //Width: 68%; for every box# id
<div id="box2">Box 2</div>
<div id="box3">Box 3</div>
</div>
I can squeeze it together as I please and everything works, but as the width of the window gets reduced I want the sidebar to stack on top of the box divs like in the bootstrap example. If I reduce the width of the window the sidebar goes on top of the divs, but it is still floated to the right and just looks broken.
What you want is probably media queries.
http://www.w3.org/TR/css3-mediaqueries/
E.G.
#media screen and (max-width: 768px) {
// insert css rules here
}
With the above CSS code you would place the CSS rules you want to come into play for devices with a resolution of 768px or below.
I have a sidebar-nav as shown in the typical Twitter Bootstrap example.
Some of my sidebar menu items are long. Depending on the size of the window, the text wraps to the next line as shown in this jsfiddle as you change the width of the window. For presentation's sake, I'd like to set a minimum width for the sidebar-nav. I know there are media tags in Bootstrap's CSS, but I'm not sure that that's what I need to be doing. Basically, I want the content section to still be responsive, but have the sidebar menu to have a minimum width (or actually a locked width might be even better).
Is there a way to fix the width of the sidebarnav but make sure it still plays nicely with the content section of the page?
Get the nav out of the fluid-container, set its position to absolute and add a margin-left to the container. It's not Twitter Bootstrap's native positioning method, but it should work.
Markup:
<div class="navbar navbar-fixed-top">...</div>
<div class="the-sidebar">...</div>
<div class="container-fluid the-container>...</div>
CSS:
.the-sidebar {
position: absolute;
width: 220px;
}
.the-container {
margin-left: 240px;
}
This is the script on jsfiddle (i've used latest version of Twitter Bootstrap)
TIP:
If you want an always-visible sidebar, just change positioning to fixed