[Resolved] sidebar getting mixed in content when layout has sidebar and view in a row

[Author]

Posts

[simranjeetS-2]

I am trying to: have sidebar responsive in a row in a layout. I have a view which shows in a layout. If I add sidebar, it is not responsive.
Link to a page where the issue can be seen:
hidden link
I expected to see:
I expected that sidebar will go to bottom as it is responsive website
Instead, I got:
sidebar row mixed with other rows.

You already have my login details

[Nigel]

Hi there

Firstly, please note that you are posting in the Community Forum for users of the free Types plugin. As a Toolset customer you can and should post in the Technical Support forum which we prioritise and where you should receive speedier service.

You have added custom CSS to the site which overrides the Bootstrap styles responsible for the responsive grid—see the screenshot.

Disabling those custom styles restores the responsive-ness of the layout.

[simranjeetS-2]

Hi. Thanks for replying. I will follow your advice and will post in other forum from next time.

Regarding my problem, your instructions don't seem to work. I removed custom css from avada. but still there is a problem on same page with sidebar. Can you login and check? see the screenshot

Thanks

[Nigel]

The styles are still being added, as you can see in the screenshots.

I'm not familiar with all the places that Fusion Builder can add custom CSS, but Fusion Builder is the source.

[simranjeetS-2]

Hi. I understood what you said. I then reset database. Did everything over again. Presently, my website is working without any Avada theme plugin. I have not even modified Avada theme basic settings. It is now "as is". I have now added no custom css modification whatsoever in toolset or avada. But problem persists. See the screenshot. I cannot understand where I am wrong. Can you please help me?

[Nigel]

Hi there

I took another look and it turns out that Avada adds 365Kb (!!) worth of inline styles to the header by default, in addition to the theme's own stylesheet.

For some unknown reason those inline styles cripple the Bootstrap responsive grid—even though Avada has its own grid system—and I cannot see how to modify just those styles in the theme settings.

You can disable this fatberg of CSS in its entirety, but cannot selectively remove parts of it, which means that you can re-gain the use of the Bootstrap grid at the expense of being able to use Avada theme settings to customise CSS (you can still add your own CSS rules).

There may be side effects in terms of the theme styling.

If you want to try that and see how it affects your site then you can disable this block of CSS by adding the following PHP to your child theme's functions.php:

/**
 * Disable Avada inline CSS
 */
add_filter( 'fusion_library_inline_dynamic_css', '__return_empty_string' );

Let me know if that works for you. Otherwise I'll need to spend more time thinking of a solution.

[simranjeetS-2]

Thanks a lot. But I have changed the theme for better solution.