Different sidebar widths based on device or screen width
Is there any way to apply a variable width of the sidebars (20%, 25%, 30%, 33%, 20%, etc) based on the device/screen width?
For example, on large monitors we have sidebar set to 30% with no issues (only using one sidebar for entire site). As the device width decreases and we hit the "tablet" sizes (768px for example), we need a larger width for the sidebar, 40% is perfect until it jumps to the phone sizes and the layout changes. We have some customized styled forms in the sidebar that don't scale well so would like to keep their width so they fit.
However, I can't see a way to do this using the warp 7 customizer. We can have different copies of modules with Uikit styles for the size and style but there is no option for that as far as I can tell.
I almost tried to add new media queries to the custom.css to override the ".uk-width-medium-3-10" class and force it to be "40%" for both main and aside content but this is RIDICULOUS and a disaster waiting to happen.
Is there a way to modify or "add" a "media query" edit to the theme.less to allow for device size selection of sidebar widths?
Any help would be very appreciated.
I guess I wasn't clear on what I needed.
I am looking for a way to have different sidebar widths based on screen widths, not the various media queries for different screen sizes. Your comment about "media queries not a good idea" is confusing since that's exactly how warp works with uikit classes for different size displays. I simply would like sidebar widths to have the option for small, medium, large responsive widths.
I am looking to use Uikit and warp 7 but have the option to apply a 40% sidebar width from the template manager "Layouts" ONLY to tablet or "medium" widths. The sidebar percentages are only global values that apply to ALL sizes. There is no option to have the sidebar widths to be 40% just for "medium" screen widths, and 30% for large and above.
I want to avoid have a bazillionn complex media queries in my custom html overriding the core warp and uikit functionality. Would much rather modify theme.less or even the style theme.php to add that selection option in.
I may just completely override Uikit and customizer settings completely since the layout of the site will never change. Just hard code in the columns and widths. All of these core overrides make it difficult to update the template.