On Contact Page I want no Sidebar, its gone but sidebar empty space remains

[bluebit]

I want my contact form on my contact page to be in the center.

I already selected Content (No sidebar) in the settings for my Contact Page, so I have no idea why it’s not working.

[bluebit]

I also have this code in my custom css, maybe this is causing it?:

@media (min-width: 769px) {
#right-sidebar {
width: 240px;
}

#primary {
width: calc(100% – 240px);
}
}

input[type=”search”] {
border-radius: 0;
-webkit-appearance: none !important;
}

.inside-right-sidebar aside:nth-child(3) .widget-title {
margin-bottom: 5px;
}

.inside-right-sidebar aside:nth-child(2) .widget-title {
margin-bottom: 5px;
}

[bluebit]

Anyway I can disable the above custom css only for the contact page?

[Leo]

Hi there,

This bit of CSS is causing the issue:
https://www.screencast.com/t/Z7CWdfGZW7

Can you try replacing this:

#primary {
    width: calc(100% – 240px);
}

With this:

body.right-sidebar #primary {
    width: calc(100% – 240px);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[bluebit]

thank you just did, that fixed it!!!

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[bluebit]

oh just checked, now mobile not working correctly for the rest of the site

[Leo]

On which page? My CSS shouldn’t be the issue – it’s simply making that CSS applies to pages with a right sidebar layout instead of every page.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[bluebit]

on the homepage, the sidebar on mobile dropped down and to the left on my iPhone 8

[bluebit]

this is what my custom css look like now:

@media (min-width: 769px) {
#right-sidebar {
width: 240px;
}

body.right-sidebar #primary {
width: calc(100% – 240px);
}

}

input[type=”search”] {
border-radius: 0;
-webkit-appearance: none !important;
}

.inside-right-sidebar aside:nth-child(3) .widget-title {
margin-bottom: 5px;
}

.inside-right-sidebar aside:nth-child(2) .widget-title {
margin-bottom: 5px;
}

[bluebit]

I think I just fixed it, I removed all this:

@media (min-width: 769px) {
#right-sidebar {
width: 240px;
}

body.right-sidebar #primary {
width: calc(100% – 240px);
}

}

I forget why I even used the code in the first place.

[Leo]

That code was setting the sidebar to a fixed width.

Glad you found a solution 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts