Home Pg Sidebar on Left

1.

@media (min-width: 992px) {
.main.col-lg-9.col-md-8.kt-sidebar.kt-sidebar-right {
    float: right;
}
}

2.

@media (max-width: 768px) {
.contentclass {
    background: transparent;
}
}

You can add those to your custom css box in Theme Options > Custom CSS.

Hope that helps!

Hannah

Hm neither seem to be working. The only plugins I’m using are the kadence toolkit, WP Add Custom CSS, and WP Subscribe. I have used both of those plugins with 2 other websites I have that also use the Kadence Ascend theme with no problem.

I commented out all other CSS I had just in case something I had done conflicted with what you gave me, and still no luck.

Ugh I just found SIDEBAR SIDE OF PAGE under LAYOUT SETTINGS. You Kadence people design themes too well! I always try to write CSS for things you guys have already accounted for…thanks!

Can you check the transparency for mobile background only? It doesn’t seem to be working when I check (and I went through the Theme Options again to make sure it’s not a setting that I missed!)

THANK YOU!

The link you shared at the top isn’t taking me to your site.

Can you double check it to make sure it’s correct?

-Kevin

Sorry Kevin spelled it wrong:

https://www.prelaunch.deity.black

Try this CSS:

@media (max-width: 992px)  {
body.home {
    background: #1E1F21;
    }
}

Let me know if that works for you!

-Kevin

Hm, doesn’t seem to be working. What I want is a single-page site to collect subscribers. I set the image as body background so that it remains the same size and remains in place, which works perfectly on desktop. Since it’s set as the background however, it doesn’t resize the way I want it to on mobile, so I sent the same image as the mobile header, but now I don’t need it as the background on mobile (so on mobile: 1) image 2) sidebar optin).

I know the ascend theme really isn’t made to be a single-page site, so is there a better way to achieve what I’m trying to do?

Thanks!

I’ve thought of a different approach. Try changing the CSS to this and let me know if it works:

@media (max-width: 992px) {
body.custom-background {
    background-position: left bottom;
    }
}

This should fix this issue, if not just let me know and I’ll keep trying!

-Kevin

Hey Kevin, that didn’t work either. So you know: the background image I have for desktops is large, cropped to make sure the man is fully on the left with at least 50% of gray space on the left for the “sidebar.” That exact photo will not work on mobile, unless the entire gray space on the left is cropped. The photo that I used for the mobile header IS cropped so that only the man shows on the mobile version. Not sure if that has anything to do with the solution but when I saw “background-position: left bottom;” I thought you were trying to simply move the current background image over, which won’t work…

anyways I really appreciate your help!

Sorry, all of this CSS is working when I inspect the page, but for some reason not when it’s placed in your CSS box. Try this:

@media (max-width: 992px)  {
body.home {
    background: #1E1F21 !important;
    background-image: none !important;
    }
}

Sorry for all the back and forth, hopefully this will work for you.

-Kevin