O'Reilly logo

Magento Responsive Theme Design by Richard Carter

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Responsive one page checkout in Magento

Your next step to create your responsive Magento theme is customizing the one page Checkout, which is the Magento's one page checkout. At the moment, you will see this is quite unstyled, as shown in the following screenshot:

Responsive one page checkout in Magento

Open your theme's styles.css file in the skin/frontend/default/responsive/css directory and begin to style the one page checkout sections first. You can do by adding the following CSS outside any media queries you have previously created so it applies to all devices:

.opc .step { background: #fff9De; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding: 10px; } .opc ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required