[Ewald]

Hi,

I would like to insert a gap between my header/menu and the rest of the content. I played with margin-top and padding-bottom but I didn’t get the solution (only increased the space on the top of the content div).

Thanks in advance.

[Theme Horse Support Team]

Hi Ewald,

Please Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

#main {
    padding: 70px 0 30px;
}

Note: You can change above digit value to increase/decrease the gap between header and body.

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!

[Theme Horse Support Team]

Hi Ewald,

Are you asking to separate the header/menu and content are? So that you can see the background between header and content area?

Thank you!

[Ewald]

Exactly, this is what I want to do!

Thank you!

[Theme Horse Support Team]

Great ! 🙂

[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.

[Theme Horse Support Team]

Hi Ewald,

Can we have the site url please? So, that we can provide you a exact CSS code.

Thank you!

[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

[Theme Horse Support Team]

Hi Eward,

Use padding left and right in %. You can try below CSS code for #main:

#main {
  padding: 20px 2.97% 10px;
  margin: 30px 0;
  background-color: #fff;
}

Thank you!

[Author]

Posts