Left Align - Billing and Shipping details on confirm order page.

Please let me know how to align the billing and shipping address / details in the confirm order page.

As of now it looks messy and all the address fields show up left right and are not aligned properly.

Appreciate your help.

Regards

Please help. It is frustrating to see hotchpotch text while confirming order.

We need to know which section of the code takes care of left aligning the text and we will take care thereafter.

Regards,

Hi rgujral,

Thank you for your feedback!

Please open your ~/Themes/ShopAll/Content/styles.css and add the following:

.order-summary-content .order-details-table {
    width: 100%;
}

then press Ctrl + F5 to clear your browser's cache.

Hope that helps!

Thank for your inputs.

However, it still shows the data the way it used to. I refreshed, restarted, deleted cookies etc, but no change.  

Please help.

Regards,

Hi,

This should work. Have you added it in your ~/Themes/ShopAll/Content/style.css, because now when I open your site I cannot see the

.order-summary-content .order-details-table {
    width: 100%;
}

declaration.

Please let us know how it goes!

Hi :

It is there, please look at the snippet below.
On http://www.wrapdeal.com/onepagecheckout page, both billing and shipping addresses have been shown but not aligned properly.

It is not showing up in View Source though.

Regards,


=======================================

.order-summary-content .cart-collaterals
{
    padding: 20px 0 10px;
    width: 550px;
}

//raminder start
.order-summary-content .order-details-table {
    width: 100%;
}
//raminder end

.order-summary-content .deals
{
    display: inline;
    float: left;
    margin: 0 20px 0 0;
    width: 250px;
}
    .order-summary-content .deals .title,
    .order-summary-content .deals .hint {
        margin-bottom: 7.5px;
    }
    .order-summary-content .deals .discount-coupon-code {
        width: 139px;
    }
    .order-summary-content .deals .gift-card-coupon-code {
        width: 143px;
    }
========================

Hi,

You should remove the //raminder start and  //raminder end as it is not a valid css comment and this breaks the css declaration for the table width. The valid css comment is /* your text here */ You can use it that way.

Thanks!

Oops, thanks for pointing that out, I have old habit of C++, C# days.

I see a change where both billing and shipping are separated apart but are not left aligned EACH.

Regards,

Hi,

I can see now what you want to achieve. Please edit the new class declaration as shown below:

.order-summary-content .order-details-table {
    width: 100%;
    text-align: left;
}

The line in bold is the newly added one.

Hope that helps!

Great, that works.

Thank You very much.