Sidebar content crashes into footer

Support
#1

Dear X Team,

I noticed an error browsing the blog of my website on mobile.
This is it: http://tinyurl.com/ya5y9uyn

Basically my sidebar goes inside the footer.
Here’s a screen shot: https://imgur.com/a/bi1vX

Is there any way to prevent this?

Thanks in advance,

Rick

#2

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

For Design & Development, Marketing & Media, and Hosting & Optimization discussions you are welcome to use the General Forum to discuss with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

#3

Hi Rick,

To fix it, you can add z-index: 9999; to your fixed widget inline style.

Hope that helps.

#4

Hi Paul,

With “inline style” you mean css, right?

From what I see on my ftp, inside the folder of the plugin there’s no .css at all.
Just .js and .php files.

[Album] Imgur

I just tried adding

.q2w3-fixed-widget-container { z-index: 9999;}

in custom css but unfortunately nothing really changes.

Rick

#5

Hi Rick,

You’re having that side effect because of a fixed sidebar and a transparent footer.
We can apply the same background-color of the body to your footer so the sidebar won’t get see-through. To do this please add the following on your custom CSS

.x-colophon.top, .x-colophon.bottom {
	background-color: #eaeaea;
}

Thanks,

#6

Hi Friech,

Thanks for your help.

I used your code, but nothing really changes:
unfortunately the error is still there.

#7

Hi There,

Where did you paste the CSS code? I am not seeing it on your custom CSS. Try a red color background first so we’ll know if the CSS is being applied or not.

Thanks,

#8

Hi @friech,

I tried pasting your code inside:
Customize > Custom > Edit Global CSS

but nothing happened, then I removed the code and tried pasting it into:
Customize > Custom > Additional CSS - but again, nothing happened.

As you can see from these two images:

I tried adding #eaeaea color, and red color #ff0000 as you suggested, but again, nothing really changes.

Anyway @friech I think this is not the solution:

As you can see, I have another X website ( http://bit.ly/2woJg9Q ) with a dark grey footer
and the error is there as well.

The sidebar always crashes / disappears inside the footer,
even if I added the code @paul.r suggested:

.q2w3-fixed-widget-container { z-index: 9999;}

#9

Hi Rick,

There seems to be a custom script on the site that adds a fixed height to the sidebar.

You can try to override it by adding this code:

@media (max-width: 480px) {
    .x-sidebar.right {
        height: auto !important;
    }
}

Hope this helps.

#10

Hi @Jade

Unfortunately the error is still there.
I’m going to give you access to the site,
so you can have a proper look.

Thank you in advance,

Rick

#11

Hi there,

I went ahead and added this CSS,

@media ( max-width: 979px ) {
.q2w3-fixed-widget-container #text-10, .q2w3-fixed-widget-container {
position: static !important;
height: auto !important;
}
.q2w3-fixed-widget-container #text-10_clone {
visibility: visible !important;
height: auto !important;
}
}

Thanks.

#12

Thank you so much @Rad!

#13

You’re always welcome!

Cheers!