StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow To Left Align the Title Using CSS
text
Body
copied!<p>I am developing a theme on my website using Thesis 2. I just modified the classic responsive theme.</p> <p>I created an id using the div tag called "header-middle-sub". And here's the code that I used:</p> <pre class="lang-css prettyprint-override"><code>#header-middle-sub { background-color: #6699CC; display: table; margin: 0 auto; width: 897px; } </code></pre> <p>It works great on a browser using a desktop. But since it is responsive theme, when I open the site in a tablet or mobile phone, the width occupies a fixed 897px.</p> <p>If I remove this line <code>width: 897px;</code> the title is centered on the screen. So what is the code to retain the position of the title?</p> <p>BTW, here's my website <a href="http://bit.ly/1cuTmtE" rel="nofollow noreferrer">http://bit.ly/1cuTmtE</a>.</p> <p>Update:</p> <p>Can anyone please visit my site and use the "inspect element" of chrome or firefox?</p> <p>Here's the CSS of my header section:</p> <pre><code>.header { margin: 0 auto; padding: 0px; background-color: #C4C4C4; } #header-top { background-color: #7ED7F2; } #header-middle { background-color: #6699CC; border-bottom: 5px solid #0f3158; border-top: 2px solid #0F3158; padding: 20px 0 20px 0; } #header-middle-sub { background-color: #6699CC; display: table; margin: 0 auto; width: 897px; } #header-bottom { background-color: #0099CC; } #header-container { display: table; margin: 0 auto; } </code></pre> <p>Here's the layout on my theme using thesis 2.</p> <p><img src="https://i.stack.imgur.com/FXxXr.jpg" alt="enter image description here"></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