Announcement

Collapse
No announcement yet.

Tweaking the CSS for <aside>

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • gsam
    started a topic Tweaking the CSS for <aside>

    Tweaking the CSS for <aside>

    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>





  • gsam
    replied
    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!

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


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

    Leave a comment:


  • Matt Zimmermann
    replied
    Hi Gary,

    Can you post a link to the site?

    Leave a comment:


  • gsam
    replied
    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?

    Leave a comment:


  • Matt Zimmermann
    replied
    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">

    Leave a comment:


  • gsam
    replied
    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 ?

    Leave a comment:


  • Matt Zimmermann
    replied
    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

    Leave a comment:

Working...
X

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept