[Resolved] Can’t get a layout to suppress a column using hidden-xs

[Author]

Posts

[nickH-5]

I am trying to: Create a layout with two columns, one of which should not appear on a mobile

Link to a page where the issue can be seen: radioverulam.com/concept3

I expected to see: no "hidden on phone" when viewed on a mobile

Instead, I got: mobile display same as desktop

I looked at the solution at https://toolset.com/forums/topic/non-responsive-pages/ but the function appears to have a hidden link in it

[Diego Pereira]

Hello @nickH-5, welcome to the Toolset support Forum!

This is the content of the other ticket:
"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."

Please let me know if it worked for you. Another option is to create a custom class then use CSS + Media Queries to hide the content on mobile.

All the best,
Diego

[nickH-5]

Thanks Diego

Unfortunately, the way your answer is presented in the toolset ticket is unhelpful as it contains a hidden link (as does the original reply). See attached screenshot

[Shane]

Hi Nick,

The link that is hidden is actually

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Please let me know if you're able to see it now.
Thanks,
Shane

[nickH-5]

My issue is resolved now. Thank you!