Qode Slider conflict with Bootstrap on parallax site

This thread is resolved. Here is a description of the problem and solution.

Problem: I am using a Qode Slider on a parallax-style site to display an image gallery. When I scroll past the gallery, I see blank space beneath it with Toolset active.

Solution: This conflict is between Bootstrap and Qode Sliders. Both use the CSS class "carousel", and the positioning styles clash. The two options are:
1. Disable Bootstrap in Toolset > Settings > General
2. Add overriding CSS to fix the positioning of carousel items in a Qode Slider:

.q_slider_inner .carousel-inner {
  position: fixed;
}

This support ticket is created 7 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Types plugin

This topic contains 2 replies, has 2 voices.

Last updated by leilaG 7 years ago.

Assisted by: Christian Cox.

Author

Posts

November 15, 2017 at 2:58 pm #589893

leilaG

hidden link - Slider on home when scrolling up reveals empty grey space.

When I deactivate the Toolset plugins in the staging area this issue is resolved - hidden link

Could you please investigate and see if there is some code that we can add to the home page to resolve this issue.

Thank you!

November 15, 2017 at 8:00 pm #589977

Christian Cox

Hi, it appears to be caused by the inclusion of the Bootstrap library. The custom image slider implemented in the top section of the site uses some CSS classes that are identical to those used by Bootstrap, and you're seeing some unavoidable CSS conflicts. Are you using Bootstrap in other areas of your site? If not, you can go to Toolset > Settings > General and turn off Bootstrap altogether. If you are using Bootstrap elsewhere, you can add this custom CSS override that targets carousel items within the q-slider:

.q_slider_inner .carousel-inner {
  position: fixed;
}

November 16, 2017 at 9:38 am #590141

leilaG

That worked!! Thank you for your help and support