Announcement

Collapse
No announcement yet.

Tweaking the CSS for <aside>

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

  • 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>




    Gary

    [email protected]
    www.icCommerce.com

  • 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
    Matt Zimmermann
    Director of UI/UX Standards and Theme Development
    / Miva, Inc.

    Comment


    • 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 ?
      Gary

      [email protected]
      www.icCommerce.com

      Comment


      • 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">
        Matt Zimmermann
        Director of UI/UX Standards and Theme Development
        / Miva, Inc.

        Comment


        • 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?
          Gary

          [email protected]
          www.icCommerce.com

          Comment


          • Hi Gary,

            Can you post a link to the site?
            Matt Zimmermann
            Director of UI/UX Standards and Theme Development
            / Miva, Inc.

            Comment


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

              [email protected]
              www.icCommerce.com

              Comment


              • 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.
                Matt Zimmermann
                Director of UI/UX Standards and Theme Development
                / Miva, Inc.

                Comment


                • 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!
                  Gary

                  [email protected]
                  www.icCommerce.com

                  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