100% width colored-div with smaller content-div inside

Kirby 2 Solved ✅
1

I asked a similar question in the old forum, but cannot find it anymore.

I use the standard kirby-theme which limits the content to a specific width. Now i want to use different colored content-blocks with 100% width and a content-block limited to a specific width inside (divs or sections?) to separate the content on one page. What do i have to edit in the main.css and in the templates to achieve this?

Michael

2

main.css line 93ff

body {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.5em;
  padding: 0;
  /* max-width: 50em; */
  background: #fff;
  color: #222;
}

line 177:

body {
    padding: 0;
  }

You can inspect the css using web tools, e.g. Web Developer extensions for Firefox etc, depending on your browser.

Then you can set the divs or sections (depending if you want to use HTML5 tags or not) inside to some percentage value and add margin: 0 auto; to center them on the page.

http://www.w3.org/TR/html5/sections.html#the-section-element

3

Hi,

i made these changes, but my new div, placed around the content via panel is only displayed with a fixed width much smaller than the browserwindow. have a look at bzdega.com.

4

Sorry, I don’t quite get what you mean, but you haven’t removed the max-width from the body, anyway …

5

Have found it already… you’re right. The max-width was still there.

Thanks

6

Coming closer to what i need, but now i wonder why there are some horizonal rulers after the header and before the footer. Cannot find them in the snippets. Any idea where they com from?

7

ok, found one in the header-css. now i’m looking in the footer-css.