Announcement

Collapse
No announcement yet.

Shadows 10.05 Limit Subcategories to 5-across

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

    Shadows 10.05 Limit Subcategories to 5-across

    In the new Shadows 10.05 version, I need to limit subcategories to a max of 5 on each line. I know this has something to do with grid-template-columns on the .x-subcategory-list selector, but I can't seem to quite make it work.

    I tried this:
    Code:
    .x-subcategory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    Which is great in many cases, but if there are only two subcategories, it makes each one REALLY call, with a lot of whitespace above and below the image, with the subcategory name way down at the bottom as shown in this image.
    chrome_2022-12-22_13-04-17.png

    Thanks,
    Susan
    Susan Petracco
    NetBlazon

    1.866.400.2444

    _____________________________________________

    Like us on Facebook

    #2
    Disregard, this was an issue with media queries, because I wanted 2-across on phones. For posterity here is what works, hopefully in all cases.

    Code:
    .x-subcategory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    @media (min-width: 40em) {
    .x-subcategory-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    }
    Susan Petracco
    NetBlazon

    1.866.400.2444

    _____________________________________________

    Like us on Facebook

    Comment


      #3
      So happy they switched to CSS Grid -- should've done that with the last release (but I get they were still trying to support IE 11). CSS Tricks has a pretty great article here:

      https://css-tricks.com/snippets/css/...te-guide-grid/

      -Ryan

      Comment


        #4
        Originally posted by RTHOMASDESIGN View Post
        So happy they switched to CSS Grid -- should've done that with the last release (but I get they were still trying to support IE 11). CSS Tricks has a pretty great article here:

        https://css-tricks.com/snippets/css/...te-guide-grid/

        -Ryan
        I'm thinking it should be called Shadows 3.0
        Leslie Kirk
        Miva Certified Developer
        Miva Merchant Specialist since 1997
        Previously of Webs Your Way
        (aka Leslie Nord leslienord)

        Email me: [email protected]
        www.lesliekirk.com

        Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

        Comment

        Working...
        X