Tweaking the CSS for <aside>

[gsam]

Facets using custom fields are displayed in the aside section of the CTGY page until the viewport drops below the large breakpoint and then it changes to a full-width dropdown above the products. I would like to keep the facets in the aside section until the viewport drops below the medium breakpoint.

I can't find the code to change this. Can anyone give me a pointer on where to look? I was working on the page details where the following code is but I think this is for the facets using the category tree and not the custom fields.

<aside class="o-layout__item u-width-12 u-width-3--l">
<section class="o-layout u-hidden--l">
<div class="o-layout__item">
<p class="c-heading-delta u-text-bold u-text-center u-text-uppercase">&mvte:category:name;</p>
<mvt:if expr="NOT ISNULL l.settings:category_title:image">
<div class="x-hero" title="&mvte:category:name;">
<img src="&mvte:category_title:image;" alt="&mvte:category:name;">
</div>
<br>
</mvt:if>
</div>
</section>
<mvt:comment><mvt:item name="category_tree" /></mvt:comment>
<mvt:item name="facets" />
</aside>

[Matt Zimmermann]

Hi Gary,

If you would like the layout to stay until a smaller break point, you would change the large width setting of the aside to u-width-3--m and the one for the content to u-width-9--m

[gsam]

Guess I am in the right place.

<aside class="o-layout__item u-width-12 u-width-3--l">
would change to;
<aside class="o-layout__item u-width-12 u-width-3--m">

and where do I change the content to u-width-9--m ?

[Matt Zimmermann]

Hi Gary,

The DIV above it would change from <div class="o-layout__item u-width-12 u-width-9--l"> to <div class="o-layout__item u-width-12 u-width-9--m">

[gsam]

So the widths have changed but the overall layout still looks like the default. The facet looks like a dropdown box(3 columns wide) and the content(9 columns wide) is displayed below the facet.

I really appreciate the help and hate to ask but any suggestions?

[Matt Zimmermann]

Hi Gary,

Can you post a link to the site?

[gsam]

http://dev3.paddletramps.com/categor...y-Symbols.html

[Matt Zimmermann]

Hi Gary,

Ah, you will have to copy some of the styles from the category tree extension CSS file into theme-styles.css to overwrite some of the media query functionality.

[gsam]

That took care of the facet, it now stays open.

The contents were still falling below the facets but I was able to fix it by changing the o-layout--column-reverse--l to --m in the section just above the content div:

<section class="o-layout o-layout--column-reverse o-layout--row-reverse--m o-layout--wide">
<div class="o-layout__item u-width-12 u-width-9--m">

Thanks again for all your help!