StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBootstrap - alignment issues with container-fluid
text
Body
copied!<p>I have a comics site, <a href="http://hittingtreeswithsticks.com" rel="nofollow noreferrer">http://hittingtreeswithsticks.com</a>, and want to maintain a 100% width for my header (so it stretches 100% on any browser), but a fixed width for my content (want to maintain fixed 950px width). </p> <p>Therefore, I put the header and footer in <code><div class="container-fluid"></code> and the main content in <code><div class="container"></code> to achieve that.</p> <p>I've been testing locally on IE9, Chrome, and FireFox on a 1920 x 1080 resolution and it the header looked fine.</p> <p><img src="https://i.stack.imgur.com/ujWro.png" alt="enter image description here"></p> <p>But when I tested on a smaller monitor, 1366 x 768, the header items seems to mush together. </p> <p><img src="https://i.stack.imgur.com/Vv8FT.png" alt="enter image description here"></p> <p>In the header.php file, I have this set up (simplified) for the heading logo and links</p> <pre><code><div class="container-fluid"> <div id="header"> <div class="row-fluid"> <div class="span3 offset3"> <logo> </div> <div class="span1"> <comics link> </div> <div class="span1"> <about link> </div> And so on... </code></pre> <p>In header.php, I put an opening <code><div class="container"></code> so that all other templates that include the header will be within <code>containter</code> and not <code>container-fluid</code>.</p> <p>Any ideas why that might be happening?</p> <p>Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload