The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Working with the CSS on the 2.0 cart?

I have been trying to figure out the CSS for the 2.0 cart for close to an hour. Specifically trying to get rid of what seems like exhorbitant white space around the cart items. I have tried the usual check in Chrome developer tool for the relevant CSS and override it approach without success (telling me to use the Chrome developer tool if anyone is inclined to do so - isn't enough). I indicate margin: 0 to some CSS and the element I am trying to affect is not rendered as I think such a CSS change should accomplish due to some negative margin on some other CSS. There are negative margins all over the place - no idea why. The FoxyCart CSS is incredibly complicated and I am having a heck of a time making heads or tails of it and how to change the rendering of page elements.

Can someone please run through how to make the following change in this thread one step at a time so that I can hopefully learn how to work with the FoxyCart CSS in a less time consuming manner? Don't just tell me what to do but rather how to do it and why.

I am trying to get rid of the white space under cart items.

You would think the following would eliminate ALL padding and ALL margin but it doesn't for example.

.fc-container__row .fc-cart__item {
padding: 0;
margin: 0;
How do I get rid of all the white space margin and padding so that I can start fresh to render cart items as I want?

Anybody? Again please do not just tell me what to do. I would like to know how to work with FoxyCart's CSS better so I would appreciate a bit more insight into the why and how of what to do as well. You don't have to hold my hand and teach me how to do CSS. I know how to do CSS overall. I just can't make heads or tails out of FoxyCart's CSS is all. That's what I need some help with. Understanding FoxyCart's CSS and how to work with it to achieve what I want to do.

No CSS should be this difficult to work with!

WHY doesn't the above get rid of all padding and margin on the DIV that uses those classes for example?

  • I figured out what the problem was so...please discount this thread.

    I had some custom CSS that was affecting all UL's and LI's on every page on the site.

    #content ul li {
    margin-bottom: 10px;
    The above site-wide every page CSS was affecting the LI inside the cart item DIV and adding 10px to the bottom of the "Remove this item" LI within that DIV.

    So it had nothing to do with the FoxyCart CSS in particular but rather with the nature of CSS inheriting values from my own CSS.

    That's why I could not figure out how to change things within the FoxyCart CSS alone. What I was trying to do wasn't possible without taking into account the affect of my own CSS on that of FoxyCart.

    I am not sure how to prevent this kind of thing in the future, I have had problems with this sort of thing before. I will just have to remember to check outside the scope of FoxyCart's CSS in the future if some change doesn't seem to work within FoxyCart's CSS alone.

    I still think FoxyCart's CSS is very difficult to work with for various reasons but in this case...the fault lay with my own CSS affecting FoxyCart's.


  • fc_jedfc_jed FoxyCart Team

    We're happy you found the solution to your problem, and thank you for sharing the steps that you did. Could be very helpful in the future. Let us know if you run into additional trouble.
  • Part of the reason that FoxyCart's CSS is so incredibly difficult to work with is that you all have negative margins all over the place and additional content being spit out by :after and :before pseudo elements.

    So one cannot just override simple CSS as in making a change to an obvious DIV class for example. One has to take into account that a negative margin on some other CSS selector may override one's change or that content or display or other properties within an :after or :before may also affect the element you are trying to change.

    I have no clue why you all have felt a need to put in such elements and other such things instead of using straight and simple CSS which would have made your CSS much easier to work with.

    As it's a bit like spaghetti in that one has to unravel what selector where is affecting the element one is trying to change. can certainly use tools like Chrome Web Developer to help out greatly but seeing what selector is affecting the element you are trying to change and how to make a change is not always easy even that way.

    For example here is one group of selectors that Chrome Web Developer is reporting as affecting a particular DIV...

    #fc .row:before, #fc .fc-container__row:before, #fc .fc-checkout__main:before, #fc .fc-receipt__row:before, #fc #fc-receipt-container .fc-form-group:before, #fc .row:after, #fc .fc-container__row:after, #fc .fc-checkout__main:after, #fc .fc-receipt__row:after, #fc #fc-receipt-container .fc-form-group:after
    That's a relatively short list of selectors compared to some I have seen.

    Buried in there is the selector that is related to the change I want to make. #fc .fc_container__row:after.

    You have to read through that list one selector at a time to find that one. In this particular list it's not too bad but there are lists of selectors affecting elements that are much longer than this one. Reading through and finding the one that might affect your desired change is a royal pain.

    In my case I needed to change the :after properties to display:inline-block instead of display:table to get rid of the spacing between cart elements. Who knows what that change is going to affect next. Maybe the cart won't look good in mobile or something leading me to wade into the CSS spaghetti once again to make yet more changes.

    In many respects it would have been easier and much less frustrating to have a cart that was not styled at all allowing me to style it any way I might like instead of trying to override the existing styles.

    It also would have been so much simpler if there had been no :after and :before elements and just plain margins and padding on the respective DIV's which I could have seen easily and changed just as easily.

    All of this overly complex CSS makes it very, very difficult to work with your CSS to affect changes to the look of the templates in my opinion.

    For what it's worth.

  • fc_jedfc_jed FoxyCart Team
    We understand your concern, and we'll take your valuable input under consideration as we work on polishing everything. Thanks, @carlos123!
Sign In or Register to comment.