[Resolved] Non Responsive pages

[Author]

Posts

[eldredC]

Hi, I've found that the combination of Avada and Layouts is causing my site to be non responsive for mobile screens.

the sidebar is not correctly moving to the bottom of the page and the content pane is staying at 75% rather than going to 100%.

I wonder if you could take a look at the home page and here as another example when you narrow the page the layout fails unattractively.

I have a new email campaign running so please don't make any breaks in the site for now as I need it running 100% of the time.

[Nigel]

Hi Eldred

I came across something similar a few days ago.

If you open up the source of your home page you may be surprised to see that Avada inserts into the header 510kb worth of inline styles, which includes some style rules that cripple the Bootstrap grid (used by Layouts).

You can see the advice I wrote to the client with a similar problem here: https://toolset.com/forums/topic/sidebar-getting-mixed-in-content-when-layout-has-sidebar-and-view-in-a-row/#post-620408

[eldredC]

Thanks for the info Nigel

Unfortunately, as you probably suspected it completely trashes the layout.

I have opened a support ticket with Avada and I will keep you posted.

Thanks so far.

[Nigel]

Hi Eldred

I think the solution here is for Avada to not override the Bootstrap grid styles with a media query for width: 0px.

They have their own grid system, and I can see no good reason for them to cripple the Bootstrap grid.

I can point you towards a workaround, but in testing it is not quite as simple as I had hoped.

Where Avada inserts its inline CSS block it applies a filter, giving us a chance to modify what it inserts.

So you can append some style rules to reset the Bootstrap grid styles as required.

Here is an example where I have done that.

/**
 * Reset Bootstrap column collapse
 */
add_filter( 'fusion_library_inline_dynamic_css', 'tssupp_fix_bs' );
function tssupp_fix_bs( $css ){

	$fix = "@media( min-width: 0px){
				.col-sm-3{
					width:100%
				}
			}";

	return $css . $fix;
}

However, that 0px min-width media query they use really is problematic, because if we then try and override the same, it turns out that that overrides all other media queries for greater widths, which means you need to add back in the Bootstrap styles for the grid for higher widths, too.

Here is a codepen that demos the problem: hidden link

If you comment out the last bit of CSS you'll see the problem.

You can't just fix the styles that Avada sets with that zero width media query, you have to add back the other media query width styles, too.

In speaking with the developers we might adopt such a solution, but the preferred solution would be for Avada to not break this in the first place.

[eldredC]

I have had a rather short reply back from the avada developers claiming the fault lies with the map on the front page, but the error is on all pages. So have replied and I await their further response!

[eldredC]

Ok so this is their reply...

Your wp-types plugin is changing the html(classes, wrappers) of many divs of avada theme, as a result our styling is not being applied correctly on your pages.

If you check source code of your page before and after activating this plugin, You will see many differences in the code structure.

Actual wrapper of sidebar(It had class and id sidebar) is removed by your plugins, This is why our styling is not applied to the sidebar area in responsive mode.

So problem is not from avada's end.

So the ball is back in your court unfortunately. It appears that even with the Avada Toolset plugin there is a conflict between the two.

[Nigel]

Hi Eldred

I don't want to make you the ball in a ping-pong game between Toolset and Avada, but the person you dealt with is wrong, which is understandable because they are not familiar with Toolset.

If they have looked at the page source and found that the markup for your sidebar doesn't look how they expect, it is because it is not an Avada sidebar, it is a column in a Bootstrap grid layout you created with Toolset.

And it doesn't work because Avada adds styles that cripple the Bootstrap grid system. Toolset isn't actually relevant here, the issue is between Avada and Bootstrap (which Toolset uses, but which could be used by any number of other plugins, or you may have enqueued Bootstrap CSS yourself for your own purposes).

The question is, what good reason do they have to override the Bootstrap grid style rules with a media query that has min-width:0, meaning it is applied at all widths, and breaks Bootstrap columns collapsing on small screens?

I'm going to escalate this so that our compatibility team can contact Avada and seek a solution, and I'll update you when there is news.

[eldredC]

Thank you Nigel, that's much appreciated.

I do hope it is soon as I have a different theme, The7 under development but as usual have a few issues with that, but not with the layout!

Thanks I look forward to hearing what they say.

[eldredC]

Hi Nigel

As a test, and maybe to help you guys work on it as well here is a test page hidden link

It is identical in code to the home page but I have stopped using the Layout for pages on this page and instead have used the Avada Fusion page options to get what I need. The page works fine on all screens now.

[eldredC]

I will leave the home page with the error for 24 hours for you to discuss then I will need to change all my pages to remove the layout control as much as possible.

[Nigel]

Hi Eldred

Our developers concur that this is an Avada problem, and we are not going to try and fix their CSS which breaks Bootstrap. We are communicating that to them, you may want to point this out to Avada, too.

You can verify this on a site with Avada installed and no Toolset plugins.

You'll need to enqueue Bootstrap styles like so:

add_action( 'wp_enqueue_scripts', 'enqueue_bs' );
function enqueue_bs(){
  	wp_enqueue_style( 'bs-style', '<em><u>hidden link</u></em>' );
}

Then create a test page with this simple markup:

<div class="col-sm-9">
  <p>Three quarter width section</p>
</div>
<div class="col-sm-3">
  <p>One quarter width section</p>
</div>

Visit the page on the front end and confirm that the columns don't collapse.

It appears that they only break the sm column stacking, so you could change the default column width in your settings at Toolset > Settings > Layouts to another size such as xs.