[Ewald]

Hi,

when you look at the startpage
I added those two things to the custom.css

.wrapper {
 background-color: transparent;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#main {
  padding: 20px 30px 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

With the padding, I minimized the white space in the #main div at the top and bottom AND pushed the div to the left and right, so the width is the same as the header and footer. But when you minimize the window to get the mobile version, the #main div exceeds the width on the right side. I don’t know if padding is the proper way to do this, it worked for the “normal” view, so I used it temporary.

Thanks

[Ewald]

Can you help me one more time? I was able to reach my goal by making the wrapper transparent and pushing the #main width to the same level as header and footer. In the web view everything looks great, but due to the padding, the mobile view is pushed out of the borders on the right side (because I fixed the padding to 10 or 20 px).. How can I get that the width of the #main is the same as the header/footer width in all views?

Thanks.

[Ewald]

Exactly, this is what I want to do!

Thank you!

[Ewald]

Hi,

I tried this solution but figured out, that it doesn’t solve my problem. The desired state is that I can see the background image in the gap. This solution increases the white content box, but doesn’t separate the header from the content. The page I’m working on is this.

Thank you!

[Author]

Posts