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.

How to adjust the width of the left and right sections of checkout without messing up the rendering?

I am having a heck of a time trying to adjust the width of the left and right sections of the default FoxyCart 2.0 checkout and would appreciate any insight on how you all are doing this so that I might be able to better work with it to do what I want.

It's not a simple change of adjusting the width of one DIV on the left and one DIV on the right percentage wise so that the two sections of the checkout continue to render at 100% of the available space.

For example the right section, which holds the cart, among other CSS affecting it uses a left: 66.666% which doesn't apply to that section directly but rather sets a margin to that section instead.

If I adjust the width of that percentage some of the cart become invisible and so on.

Why am I fiddling with this?

Because I am greatly simplifying the checkout form and am now working with too much space left after removing some of the FoxyCart defaults. I want to eliminate the excess space.

I'll play with it some more but am hoping someone can give me some pointers.

Thanks.

Carlos
Comments
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    Sure thing.

    You should be able to simply change the width of the parent wrapper and the rest will follow suit as it's percentage based. Changing the width of #fc .fc-container should achieve that.

    For altering the percentage of that width that the two columns make up - you'll need to change the width of #fc .fc-checkout__main__contents and then change the left offset to match that and also the width of #fc .fc-checkout__main .fc-sidebar--checkout. Making those two changes will change the widths of the content.

    With our default styles also being responsive though, you need to take that into account as well. The templates are mobile-first responsive, so the default styles cover that. You can then overwrite the styles for whatever specific widths you need, we apply them for min-width's of 769px, 992px and 1200px.

    To be honest though, with the type of customisation you're doing there, it might actually be easier to not use our default styling at all and use your own. That would definitely give you the freedom to approach the styling however you need to. Obviously that's up to you though - I'm not sure how much more you're needing to customise.
  • Hi Adam,

    I should have been clearer in what I originally posted (I was in a hurry when I did post and was not all that clear I don't think).

    The problem I was having was with trying to change the relative width of the cart "sidebar" and the rest of the checkout within the overall container.

    Your input helps to clarify things and gives me a better handle on what to focus changing. I will play with it some more today and get back to you if I still am having a problem.

    Thanks Adam!

    Carlos

    PS. How do I eliminate the default styling? Do I just delete the style line in the template that pulls in the responsive styles or is there a text styles like there was for 0.7.2?
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    We currently don't have any reduced/simplified styling - as you thought though, the way to remove our own styling is to remove the styles include that is a part of the template.
  • Sounds good Adam. I will try that and see if it's easier to style things myself. I suspect though that, given that I have come this far, that it is easier to stick with the default styling and keep working to change that.

    Still...your suggestion is worth trying.

    Carlos
  • carlos123carlos123 Member
    edited July 2015
    That's not working quite right Adam.

    Assuming I wanted to make the cart (which I refer to as the "right" side) appear at 50% of the width of the overall container and the rest of the checkout page (which I refer to as the "left") also at 50%...is this what you had in mind?


    /* "left" section of checkout page */
    #fc .fc-checkout__main__contents {
    width: 50%;
    }
    /* "right" section of checkout page */
    #fc .fc-checkout__main .fc-sidebar--checkout {
    width: 50%;
    left: 50%;
    }


    The above causes the contents inside the container to totally get messed up. It is still rather confusing as to how FoxyCart is doing the widths in question as it is not intuitively clear CSS wise (at least to me).

    I'll keep playing with it but do you have any other suggestions?

    Carlos
  • carlos123carlos123 Member
    edited July 2015
    Can you (or anyone for that matter) give me a few more details as to the overall CSS methodology (or logic if you will) that foxycart is using for the width of the content inside the overall container Adam?

    It is incredibly confusing trying to figure out what is what in the default CSS as there aren't just a couple of DIV's inside the container holding the checkout page left and right (i.e. sidebar) contents whose width could be easily changed.

    Some of the default CSS seems to be there to place the contents of the fc-checkout__main__contents div first on the page when it is second in the code and the contents of the fc-sidebar fc-sidebar--checkout div second on page rendering when it is first in the code. That's part of the confusion is that FoxyCart is using CSS to manipulate what renders on the page in ways that are not easily understood on a first glance.

    I have been staring and staring at the CSS through the browser developer tools and trying all kinds of changes to what I see but so far...I just can't get the container to split evenly 50-50 between the left side (which has the address, email, and other fields) and the right side (which has the cart).

    This change is something that is central to the changes I am making on the checkout as I have reduced content enough to where there is a lot of needless white space left that I need to eliminate (necessitating a change in the widths to make things look nice again). I will be changing things even more and will need to play around with the widths until I get things just right.

    Carlos
  • Adam,

    Although it will set me back by another day or two...I think I am going to try and go the way you mentioned and start from scratch to apply my own CSS to the checkout form and cart.

    It's just way too much of a hassle to try and work with FoxyCart's CSS.

    Not only to figure it out but also to try and make changes to it without messing something up.

    Anyway...I don't need any more input on this thread in view of that Adam.

    Thanks.

    Carlos
  • fc_adamfc_adam FoxyCart Team
    @carlos123,

    Oh sorry - I did indeed miss one crucial style. On the #fc .fc-checkout__main__contents element you'll also need to give it a right:50% style.
Sign In or Register to comment.