9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

One Page Checkout - CSS Advice

by Shaolinsteve
7 replies
  • WEB DESIGN
    • |
Hi Guys,

First and foremost, Thank You for all the information, and support you have given me this year, I really apprciate it.

On a store I have been working on, we are using Magento and have recently installed this extension: IWD Free One Page & One Step Checkout - Magento Connect on: Professional Gadget Shop - TomsGadgets.com

I am using a Custom Theme and the thing is, on the checkout page the "Review Your Order" is supposed to be on the right hand side like their demo here: FREE Magento One Step Checkout | One Page Checkout Extension (click add to cart for the example)

Currently mine looks like this:





Now im sure this must be a css thing and I have tried a few things however due to the lack of my experience I am still unable to move "Review Your Order" to the right as a 3 column layout.

If anyone with familiar CSS skills can help I would highly appreciate it. The checkout page is not like pages you create in the backend, so it's not as if I can select an option to change the column layout if that's the problem.


Appreciate Your Advice Guys!

Steve.
#advise #checkout #css #page
  • Profile picture of the author clickbump
    Hi Steve, it should be easy to fix.

    PM the link to your site and I'll see if I can help.

    It appears that the "parent" container that holds the three columns is not wide enough to fit the third column (which I'm guessing is "floated" with css to the right of the 2nd column).

    Floated elements wrap below their adjacent element when they can't fit into their allocated space.
    Signature
    {{ DiscussionBoard.errors[7470278].message }}
  • Profile picture of the author Shaolinsteve
    Hi Scott,

    Thanks for replying. I have sent you a PM, hopefully this is something that can be resolved fairly easily. Look forward to your reply.

    Appreciate it.
    Signature
    {{ DiscussionBoard.errors[7486525].message }}
  • Profile picture of the author clickbump
    Steve, this section of your checkout page is made up of 3 div elements: col-1, col-2, and col-3

    The problem was that they all had explicitly applied margins which, collectively, would not allow all three elements to fit on the same horizontal area within their parent container element. So, as a result, there was only room for the first two elements and the third element was forced to wrap to the bottom of the second.

    To fix this, you just need to add the css code below to the bottom stylesheet (below any other rules and preferably into the last stylesheet that you include on your page):

    Code:
    .col-1,.col-2,.col-3{margin:0 !important;padding:0 30px 0 0}
.col-3{padding-right:0}
    What I'm doing there is resetting the margins to zero and applying 30 pixels of right side padding to the first two elements. This creates the separation between elements without creating the wrap issues on the third element.

    Another way to accomplish this is to use the "box-sizing" property with a value of "border-box", but its not supported by IE < 8 (IE 7 and below will not recognize/apply it, but all modern browsers will)

    The code for that would be:

    Code:
    .col-1,.col-2,.col-3{
    margin:0 !important;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    padding:0 30px 0 0;
    width:33% !important
}
    The advantage of the second method above is that, although there is more css code required (mainly due to the need for vendor prefixes on the "box-sizing" property), the elements will NEVER wrap, regardless of how much padding you apply to them. The padding and border sizing is applied to the INSIDE of the elements rather than the outside as the default w3c box model dictates.

    So, with the first method, as you increase the right padding value, at some point you will hit the limit of the available space and the elements will begin to wrap. This will not happen with box-sizing:border-box applied.

    If you are interested in reading more about the box-sizing method, including how to apply it to the entire page (and save yourself lots of time troubleshooting layouts like this one), I'd recommend you check out Paul Irish's article on topic.
    Signature
    {{ DiscussionBoard.errors[7493346].message }}
  • Profile picture of the author Shaolinsteve
    You are a Genius! Scott, Thank You!

    PS: I have activated the subscribe to newsletter upon checkout feature and for some reason its floating right on top of the page although the code is just underneath the coupon code.

    I assume this extension is not reading well with the theme although it does seem bizzare as to why it's placed so high up.
    Signature
    {{ DiscussionBoard.errors[7498099].message }}
    • Profile picture of the author Patrick
      Originally Posted by Shaolinsteve View Post

      You are a Genius! Scott, Thank You!

      PS: I have activated the subscribe to newsletter upon checkout feature and for some reason its floating right on top of the page although the code is just underneath the coupon code.

      I assume this extension is not reading well with the theme although it does seem bizzare as to why it's placed so high up.
      Extensions can only help you achieve the functionality you want to get. Extensions can't behave or act in the front-end the way you want it to behave automatically.

      You have changed the css of the following

      .col-1,.col-2,.col-3

      You should go back and check if that subscribe newsletter part is using any of the css class, I guess it might be using the .col-3 class since you say its floating on top right.
      Signature
      Freelance WordPress Developer | Free WordPress Themes | Free WordPress Plugins | Free WordPress Support
      {{ DiscussionBoard.errors[7498226].message }}
    • Profile picture of the author clickbump
      Originally Posted by Shaolinsteve View Post

      PS: I have activated the subscribe to newsletter upon checkout feature and for some reason its floating right on top of the page although the code is just underneath the coupon code.
      The extension is apparently absolutely positioning the newsletter element (or you have a conflicting .newsletter css that's doing it)

      Either way, this will set it straight:

      Code:
      p.newsletter{position:relative;float:none;left:auto;border:0;margin:40px 0 0 0 !important}
      In longform, here it is for clarity:

      Code:
      p.newsletter{
   position:relative; // resets the position property to remove absolute position
   float:none; // reset floats
   left:auto; // reset positioning
   border:0; // remove border. Where did that come from?
   margin:40px 0 0 0 !important; // sets the margins for good spacing
}
      Signature
      {{ DiscussionBoard.errors[7498600].message }}

Trending Topics