FYI
The responsive template pages (CartDetails.htm, CartDetailsItem.htm) for the cart page created a cramped layout on small devices and an unacceptable layout for extra small devices such as phones. Even the Demo Cart on this site has this problem. Add a few items to the cart and then view the cart using Chrome's developer tools with device mode toggled on, and select a phone from the device dropdown list such as iPhone 5 or Galaxy S4. You will see that the Price, and Line Total prices overlap to the point where they are not legible.
Also you will notice that the login box for unauthenticated users at the bottom of the cart page is too wide for xs-sm devices and this creates a horizontal scroll which we want to avoid and is one of the reasons for using responsive layouts to begin with.
To over come this, I modified breakpoints for the two pages and created two layouts, one for med to large screens, and the other for extra small to small screens. In addition, I hid the layout that is not being used. This technique keeps the look of the CV design for the md - lg devices, but adapts the design for xs-sm layouts into multiple rows.
here it the code modifications for the pages, I have highlighted the changes that I made:
CartDetails.htm
<div class="row hidden-xs hidden-sm">
<div class="col-xs-6"><strong>[PRODUCTHEADER]strong>div>
<div class="col-xs-1"><strong>[QUANTITYHEADER]strong>div>
<div class="col-xs-1"><strong>[PRICEHEADER]strong>div>
<div class="col-xs-2"><strong>[LINETOTALHEADER]strong>div>
div>
[CARTITEMS]
CartDetailsItem.htm
!-- Styling for medium to large devices --
<div class="row text-left cvCartItemRow hidden-xs hidden-sm" data-id="[ITEMID]">
<div class="col-md-6">
[PRODUCTTHUMBNAIL]
[PRODUCTHYPERLINK]
[INSTOREPICKUP]
[BACKORDERDETAILS]
[VARIANTDETAILS]
div>
<div class="col-md-1">[QUANTITY]div>
<div class="col-md-1">[UNITPRICE]div>
<div class="col-md-2">[LINETOTAL]div>
<div class="col-md-2">
<a href="#" onclick=" return DeleteItemInCart(this, [ITEMID])" class="DeleteSingleCartItem">
[LOCALIZATION:lblDeleteSingleItemFromCart.Text]
a>
div>
div>
!-- Styling for extra small to small devices. Add the following Lines--
<div class="row text-left cvCartItemRow visible-xs visible-sm" data-id="[ITEMID]">
<div class="col-xs-12">
<span class="xsCheckoutHeader">PRODUCTspan><br />
[PRODUCTHYPERLINK]
[VARIANTDETAILS]
div>
div>
<div class="row text-left cvCartItemRow visible-xs visible-sm" data-id="[ITEMID]">
<div class="col-xs-3"><span class="xsCheckoutHeader">Quantityspan> <br />[QUANTITY]div>
<div class="col-xs-3"><span class="xsCheckoutHeader">Unit Pricespan><br />[UNITPRICE]div>
<div class="col-xs-3"><span class="xsCheckoutHeader">Line Totalspan><br />[LINETOTAL]div>
<div class="col-xs-3">
<a href="#" onclick=" return DeleteItemInCart(this, [ITEMID])" class="DeleteSingleCartItem">
[LOCALIZATION:lblDeleteSingleItemFromCart.Text]
a>
div>
div><br />
I also modified/created the following styles (added them to the bottom of my skin.css file) to fix the problem with the login box at the bottom from being too wide on xs-sm devices, and allow for styling of row headers for the xs-sm layout:
.StoreCheckCentre, .infoAnonCheckoutCaption {
width: 100%;
max-width: 525px;
}
div.StoreCheckOutheader + div {
padding: 0 10px;
}
.StoreCheckOutLogin {
height: auto;
}
.xsCheckoutHeader {
font-weight: bold;
}
Maybe Nigel and Mark can try these fixes out and if they find them acceptable they can incorporate them into the next release.
I hope this helps anyone else experiencing the same problem.
Steve
----- Edited for Additional Note -----
You may not need all of the css styles above. The padding was needed to add back padding that my skin had removed, and the auto height was to fix an additional issue with my skin, with the login box taking up too much room vertically. Most likely you would need these, but they should not adversely affect your design.