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

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;
}

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

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);
}

thank you just did, that fixed it!!!

No problem :)

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

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.

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

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;
}

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.

That code was setting the sidebar to a fixed width.

Glad you found a solution :)