Store Grid Styling Issue
  • Could someone explain the Grid CSS for the product display? Whenever I show more than 8 products on a page, the layout gets screwed up. I tried editing the following code, but am unable to get the results needed to show 3 (or more ) rows with 4 products each.

    .productListing.productListingGrid li:nth-child(2n+1) {
    clear: none !important;
    }
    .productListing.productListingGrid li:nth-child(5n) {
    clear: left !important;
    }

    image




  • 13 Comments sorted by
  • Awesome! - that fixed it in IE7 & 8. Nice job. I can't say thank you enough. I really appreciate the help.
  • Would it be possible to post the site link?  It would be easier to troubleshoot that way.

    Thanks
  • Sure thing 
    - the site is not live yet but you can view the page here - 
    http://www.ericksonchiroathens.com/products 

    Any help/suggestions would be appreciated.
    Thanks
  • Anyone from Light have a chance to look at this?
  • jrstaton,

    If you get rid of the clear:left on the (5n)

    .productListing.productListingGrid li:nth-child(5n) {
        clear: none !important;
    }

    they will line up.

    P.S. I have problems in the store, where light re-sizes some images but does not always re-size the 'no product image'

  • @ckinteractive,

    Thanks for the tip - I tried your suggestion and it does make the first page of products line up, but if you navigate to the 2nd page, the product listing gets screwy again - 
    http://www.ericksonchiroathens.com/products?paginate=2813338:2 

    Now, if I change the # of products per page to 16, it works for all pages, but I'd like to be able to understand the code and how to change it to fit my needs for future use.

    With the resizing, I've found that if the images you upload aren't larger than the dimensions you set for the product listing images, it won't resize them. So if I uploaded an image that was 100x100 and set my product listing to 150x150 it wouldn't resize. I haven't had to use the 'no product image' but maybe you could just create your own at the size you need and name it the same as the one currently in the system and replace it with yours.

    Thanks again for the effort.
  • it looks like the HHS product image is a different size, so the next one in the list that is supposed to go to the row is getting stuck under it.
    the best thing I can think of right now is to put a height (or min-height) on the <li>, then if any of the product images are different sizes it won't matter.

    As for my image problem, it goes a little deeper than that. All the images are the same size- made sure of that (including the no product image). Light seems to be resizing some of the images but not always resizing by product type.
  • Setting the min-height on the li worked. Very much appreciated.

    I feel like a developer at Light should still take a look at the CSS for the grid display though. The issue will continue to appear for others since it's something that is built in to their default styles and templates.

    When I first ran into the issue, I tried to see if I could recreate it on a test site to be sure it had nothing to do with my template or styling conflicts -example - https://testsite10.publishpath.com/submit

    Good luck with your images issue and thanks again for the workaround.
  • off the top of my head I can't remember if 'min' works in IE 8+.
    so double check, you may have to set height only, instead of min-height.

    CK
  • I just looked at it in IE8 and the product pages show 6 rows of 2 products each (on my clients site and my test dev site) - which again, I'm guessing has something to do with the nth-child() on these lines of code

    .productListing.productListingGrid li:nth-child(2n+1) {
    clear: none !important;
    }
    .productListing.productListingGrid li:nth-child(5n) {
    clear: left !important;
    }

     And another reason the default Grid CSS needs to be looked into. Thanks again for all your input.
  • don't think IE8 supports nth child.
    will try to look at for you. possibly IE8+ (lt) only css product li display:inline (what ever the property name is)

    but I haven't tried it - got to boot up another machine.
  • jrstanton

    I can only see the  gridViewFix li style in IE8
    so try this, but test it for sure

    ul.productListing li.gridViewFix {clear:none !important;}

    hope that will help you out
  • I ran across this problem using Great-Air in Safari today. To fix it I changed:
    .productListingGrid li:nth-child(6n{clearleft !important;}
    to:
    .productListingGrid li:nth-child(7n{clearleft !important;}

Howdy, Stranger!

Login with Facebook

In this Discussion

Tagged

Copyright © 2014 LightCMS® Content Management System LightCMS is a product of NetSuite