Change width programmatically (in functions.php?) WP-Mobile-Detect Restrict-Wi

Hi all, I’m using a Genesis child theme with Layout Extras plugin.

Hopefully I can explain this in an articulate manner. In a nutshell, when on a desktop (see below), my site is 2 columns, where each column is 50% width; one column is inner content, the other is a sidebar. I accomplished this by changing the CSS in “genesis-layout-extras/css/gle-layout-2col-html5-styles.min.css” to this:

.sidebar-secondary{width:50% !important;}
.content-sidebar-wrap{width:50% !important;}

It works great on a desktop, but on phones and tablets I have a problem. But I better explain a bit first.

I specifically want a different experience on a desktop, phone, and tablet.

For example, on both tablets and phones, I want much less content per page, and I also want that content targetted (style and functionality, i.e. no sliders for example and no wacky padding or pretty CSS) to the type of device in order to optimize the experience. Namely, I simplify the layout, adjust other things appropriately, and where I choose to actually add different content, I can do that with these shortcodes:

‘
[notdevice]
[phone]
[tablet]
‘

…using this plugin:

https://www.ads-software.com/plugins/wp-mobile-detect/

Finally, I use this plugin to actually turn off the widgets as needed, i.e. on phones and tablets:

https://www.ads-software.com/plugins/restrict-widgets/

This system of mine is working a charm so far, with one very fatal flaw.

When I turn off the widgets on a phone or tablet, my other content only takes up 50% of the screen. The other half, the right (where the widget would be) is blank.

This is of course to be expected because of the CSS changes I noted above.

So I guess it should be clear now what I need to figure out (I am CSS/HTML only, no PHP knowledge):

How can I change my CSS above on the fly after sniffing out the device type so that the content is 100%?

In other words:

if [notdevice]
(.content-sidebar-wrap{width:50% !important;})
else
(.content-sidebar-wrap{width:100% !important;})