Databases
StackOverflow2013
Postsdbo
POOverflowing a page-container's background-color using CSS margin and padding
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOverflowing a page-container's background-color using CSS margin and padding
    primarykey
    data
    text
    <p>I am working on a the html/css of the landing page of a website/application and I don't want to make too many changes. The templates are rendered using Jinja2 and the homepage extends from a page_template.html. There are many page templates that extend the page_template.html so I would like to fiddle as little as possible with it. The designer would like to have the background-color of a div (or two) on the homepage extend out over the entire width of the browser no matter the browser/screen resolution. The page template has a <code>page-container</code> id wrapping around the entire content like so. </p> <pre><code>#page-container { background-position: 0 85px; max-width: 1200px; position: relative; margin: 0 auto; } </code></pre> <p>If I want to extend a div to go outside this width of 1200px I decided to try something like this: </p> <pre><code>.overflow { background-color: #fff; margin-right: -200px; margin-left: -200px; padding-right: 200px; padding-left: 200px; } </code></pre> <p>And do something like this: </p> <pre><code>&lt;div id="page-container"&gt; &lt;div class="overflow"&gt; Content &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And it seems to work. And it works well enough for this webapp ( I think ). However it breaks the responsiveness of the page in that the divs which have this <code>.overflow</code> class do not resize when the browser is made smaller. Is their a better way to do this? And is their a way to do this without affecting the responsiveness?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USnicholaschris
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIt seems fine. What do you mean by "..not resize" ?
      singulars
      1. POOverflowing a page-container's background-color using CSS margin and padding
      1. USFico
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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