Responsive Classic Redesign Support thread

[chadlly2003]

try this it wont impact any other pages
just add this to the very top of styleheet_zcustom.css

 #loginBody #contentMainWrapper {
	grid-template-columns:auto !important;
}

With OPC checkout what do you want it to look like? Or what is the issue?

Nick,

I'm currently working on a CSS template for OPC that will look and function well right out of the box. I expect to have it finished by Sunday—possibly sooner.

Once it's complete, I'll upload it to GitHub and update the template accordingly.

After I’ve tested it on both mobile and desktop, I’ll send you the final CSS file. All you’ll need to do is paste it in, and that should resolve the issues you’ve been experiencing.

[nicksab]

Awesome. Looking forward to it and thank you

[chadlly2003]

Nick just a followup.

I finish the OPC checkout for the responsive classic redesign template. I just need to test on mobile and desktop. I will post your section which is a little different sometime on Sunday.

Than i will put it into the template so everyone can use. This will be as easy as plug and play.

[nicksab]

Nick just a followup.

I finish the OPC checkout for the responsive classic redesign template. I just need to test on mobile and desktop. I will post your section which is a little different sometime on Sunday.

Than i will put it into the template so everyone can use. This will be as easy as plug and play.

How did the testing go?

[chadlly2003]

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
    font-size: 1.3rem;
    line-height: 25px;
    margin: 0;
    padding-bottom: 1rem;
}

#loginBody .opc-label {
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
    border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
    background: #8b008b;
    color: #fff;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
    background: transparent;
    color: #8b008b;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;


}

#loginOpcDefault .opc-block .buttonRow {
    padding-left: 0;
    padding-right: 0;
}

#opc-pwf {
    margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
    padding-top: 0rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    div.centerColumn#loginOpcDefault {
        display: flex !important;
        margin-bottom: 4rem;
    }

    #loginOpcDefault .opc-block .buttonRow {
        display: flex;
        justify-content: end;
    }

    #loginOpcDefault span.normal_button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #loginOpcDefault #loginDefaultHeading {
        position: absolute;
    }

    #loginOpcDefault .messageStackError {
        position: absolute;
        margin-top: -2rem;
        width: 100%;
        max-width: 1280px;
    }

    #loginOpcDefault .opc-block-3 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1;
    }

    #loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #loginOpcDefault .opc-block-2 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
        margin-left: 1rem;
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
        margin-right: 1rem;
    }

    #loginOpcDefault input.submit_button {
        width: auto !important;
    }

    #loginOpcDefault .button_checkout:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_login {
        width: auto;
    }

    #loginOpcDefault .button_login:hover {
        width: auto !important;
    }
}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
    color: #8b0000;
    font-weight: bold;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#checkoutoneBody label {
    padding: 0px;
}

#checkoutoneBody #shipping_billing {
    margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
    float: none;
    margin-bottom: 2rem;
    display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
    background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
    background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
    padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
    color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
    border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -66px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#checkoutoneBody .alert {
    padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
    margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
    display: none !important;
}

#checkoutoneBody span.normal_button {
    border: solid 1px #ffd700;
    margin: 0;
}

#checkoutoneBody span.normal_button:hover {
    background: transparent;
    border: solid 1px #FFD700;
    margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
    margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
    text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
    background: transparent !important;
    color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
    float: none;
    margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
    width: 100%;
}

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

#opc-bill-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#opc-ship-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#checkoutOneSubmit {
    float: none !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
    display: block !important;
}

#checkoutoneBody #messages-bill {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#checkoutoneBody .productTax {
    display: none !important;
}

#checkoutoneBody select,
fieldset select {
    margin-bottom: 0;
}



#checkoutoneBody #choices-bill,
#choices-ship {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: 100% !important;
}


#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: center;
}

@media (min-width: 768px) {


    #checkoutoneBody #checkoutOneSubmit {
        float: none !important;
        display: flex;
        justify-content: end;
    }

    #checkoutoneBody #checkoutOneEmail {
        float: none !important;
        text-align: right;
    }

    #checkoutoneBody #choices-bill select,
    #choices-ship select {
        width: auto !important;
    }

    #opc-ship-cancel {
        margin-bottom: 0 !important;
        display: block;
    }

    #opc-bill-cancel {
        margin-bottom: 0 !important;
    }

    #checkoutoneBody #checkoutOneShoppingCart legend {
        margin-bottom: 1rem !important;
    }

    #checkoutoneBody #cartContentsDisplay .edit-button {
        position: inherit !important;
        margin-top: 0;
    }

    #checkoutoneBody .opc-right {
        display: flex;
        justify-content: space-between;
    }

    #checkoutoneBody #opc-bill-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutoneBody #opc-ship-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutOneSubmit {
        float: right !important;
        margin-top: 0;
        margin-bottom: 1rem;
    }
}


@media (min-width: 992px) {

    #checkoutShippingMethod legend {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #checkoutoneBody #checkoutOneCartGroup {
        width: 49%;
        margin: auto;
    }

    #checkoutoneBody #instructions {
        clear: both;
    }

    #checkoutoneBody .clearBoth {
        display: none;
    }

    #checkoutOneCartGroup {
        margin-right: 0px !important;
    }

    #checkoutoneBody .floatingBox {
        width: 49% !important;
    }
}

/** checkout_success **/

#checkoutsuccessBody label {
    padding: 0;
    margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
    margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
    margin-bottom: 1rem;
    margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
    display: flex;
}

#checkoutoneconfirmationBody .footer {
    display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    #checkoutSuccessGuestPassword .button_create_account {
        width: auto !important;
    }
}

#orderstatusBody #accountTaxDisplay {
    display: none;
}

#orderstatusBody hr:first-of-type {
    display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
    margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
    margin-top: 2rem;
}

#checkoutOneBillto {
    margin-bottom: 1rem;
}

#opc-billing-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    /* Vertically align checkbox + label */
    gap: 8px;
    /* Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.custom-control.custom-checkbox label {
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    cursor: pointer;
    padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
    align-content: center;
    display: block;
}

.custom-control.custom-radio {
    display: flex;
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between radio and label */
    margin-bottom: 10px;
}


.custom-control.custom-radio input[type="radio"] {
    margin: 0;
    appearance: auto;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


.custom-control.custom-radio label {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


#checkoutOneShippingFlag {
    display: flex;
    align-items: center;
    /* Vertically center checkbox and label */
    gap: 8px;
    /* Optional: space between checkbox and label */
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

#checkoutOneShippingFlag label {
    margin: 0;
    line-height: 1.2;
    color: blueviolet;

}

#flat_flat-value {
    height: 31px;
    align-content: center;
}

#checkoutPayment .radioButtonLabel {
    margin: 0px;
}


#csNotifications br {
    display: none;
}


#csNotifications input[type="checkbox"]+label.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
    line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
    margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
    z-index: 2;
    position: relative;
    margin-top: 0;
}

.checkoutOneCoupon {
    background: aliceblue;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
    background: transparent;
    padding-top: 0;
}

.checkoutOneCoupon fieldset {
    background-color: aliceblue;
}

div#checkoutShippingContentChoose {
    margin-bottom: 0px;
}

#checkoutShippingChoices legend {
    margin: 0px !important;
    border: none;
}

#comments legend {
    margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneShipto legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneBillto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShipto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutComments {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutShippingMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#instructions {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.opc-block-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
    padding-top: 0;
    margin-top:1rem;
}

.opc-block-2:first-of-type {
      padding-top: 0;
    margin-top:1rem;
}

@media (min-width: 768px) {
    .opc-block-3 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    #checkoutShippingMethod {
        margin-top: 0rem;
        padding-top: 0rem;
    }


    #checkoutOneGuestInfo {
        margin-top: 0rem;
        padding-top: 0rem;
    }
}

[lat9]

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
    font-size: 1.3rem;
    line-height: 25px;
    margin: 0;
    padding-bottom: 1rem;
}

#loginBody .opc-label {
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
    border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
    background: #8b008b;
    color: #fff;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
    background: transparent;
    color: #8b008b;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;


}

#loginOpcDefault .opc-block .buttonRow {
    padding-left: 0;
    padding-right: 0;
}

#opc-pwf {
    margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
    padding-top: 0rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    div.centerColumn#loginOpcDefault {
        display: flex !important;
        margin-bottom: 4rem;
    }

    #loginOpcDefault .opc-block .buttonRow {
        display: flex;
        justify-content: end;
    }

    #loginOpcDefault span.normal_button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #loginOpcDefault #loginDefaultHeading {
        position: absolute;
    }

    #loginOpcDefault .messageStackError {
        position: absolute;
        margin-top: -2rem;
        width: 100%;
        max-width: 1280px;
    }

    #loginOpcDefault .opc-block-3 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1;
    }

    #loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #loginOpcDefault .opc-block-2 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
        margin-left: 1rem;
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
        margin-right: 1rem;
    }

    #loginOpcDefault input.submit_button {
        width: auto !important;
    }

    #loginOpcDefault .button_checkout:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_login {
        width: auto;
    }

    #loginOpcDefault .button_login:hover {
        width: auto !important;
    }
}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
    color: #8b0000;
    font-weight: bold;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#checkoutoneBody label {
    padding: 0px;
}

#checkoutoneBody #shipping_billing {
    margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
    float: none;
    margin-bottom: 2rem;
    display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
    background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
    background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
    padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
    color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
    border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -66px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#checkoutoneBody .alert {
    padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
    margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
    display: none !important;
}

#checkoutoneBody span.normal_button {
    border: solid 1px #ffd700;
    margin: 0;
}

#checkoutoneBody span.normal_button:hover {
    background: transparent;
    border: solid 1px #FFD700;
    margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
    margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
    text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
    background: transparent !important;
    color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
    float: none;
    margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
    width: 100%;
}

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

#opc-bill-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#opc-ship-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#checkoutOneSubmit {
    float: none !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
    display: block !important;
}

#checkoutoneBody #messages-bill {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#checkoutoneBody .productTax {
    display: none !important;
}

#checkoutoneBody select,
fieldset select {
    margin-bottom: 0;
}



#checkoutoneBody #choices-bill,
#choices-ship {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: 100% !important;
}


#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: center;
}

@media (min-width: 768px) {


    #checkoutoneBody #checkoutOneSubmit {
        float: none !important;
        display: flex;
        justify-content: end;
    }

    #checkoutoneBody #checkoutOneEmail {
        float: none !important;
        text-align: right;
    }

    #checkoutoneBody #choices-bill select,
    #choices-ship select {
        width: auto !important;
    }

    #opc-ship-cancel {
        margin-bottom: 0 !important;
        display: block;
    }

    #opc-bill-cancel {
        margin-bottom: 0 !important;
    }

    #checkoutoneBody #checkoutOneShoppingCart legend {
        margin-bottom: 1rem !important;
    }

    #checkoutoneBody #cartContentsDisplay .edit-button {
        position: inherit !important;
        margin-top: 0;
    }

    #checkoutoneBody .opc-right {
        display: flex;
        justify-content: space-between;
    }

    #checkoutoneBody #opc-bill-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutoneBody #opc-ship-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutOneSubmit {
        float: right !important;
        margin-top: 0;
        margin-bottom: 1rem;
    }
}


@media (min-width: 992px) {

    #checkoutShippingMethod legend {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #checkoutoneBody #checkoutOneCartGroup {
        width: 49%;
        margin: auto;
    }

    #checkoutoneBody #instructions {
        clear: both;
    }

    #checkoutoneBody .clearBoth {
        display: none;
    }

    #checkoutOneCartGroup {
        margin-right: 0px !important;
    }

    #checkoutoneBody .floatingBox {
        width: 49% !important;
    }
}

/** checkout_success **/

#checkoutsuccessBody label {
    padding: 0;
    margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
    margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
    margin-bottom: 1rem;
    margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
    display: flex;
}

#checkoutoneconfirmationBody .footer {
    display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    #checkoutSuccessGuestPassword .button_create_account {
        width: auto !important;
    }
}

#orderstatusBody #accountTaxDisplay {
    display: none;
}

#orderstatusBody hr:first-of-type {
    display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
    margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
    margin-top: 2rem;
}

#checkoutOneBillto {
    margin-bottom: 1rem;
}

#opc-billing-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    /* Vertically align checkbox + label */
    gap: 8px;
    /* Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.custom-control.custom-checkbox label {
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    cursor: pointer;
    padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
    align-content: center;
    display: block;
}

.custom-control.custom-radio {
    display: flex;
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between radio and label */
    margin-bottom: 10px;
}


.custom-control.custom-radio input[type="radio"] {
    margin: 0;
    appearance: auto;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


.custom-control.custom-radio label {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


#checkoutOneShippingFlag {
    display: flex;
    align-items: center;
    /* Vertically center checkbox and label */
    gap: 8px;
    /* Optional: space between checkbox and label */
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

#checkoutOneShippingFlag label {
    margin: 0;
    line-height: 1.2;
    color: blueviolet;

}

#flat_flat-value {
    height: 31px;
    align-content: center;
}

#checkoutPayment .radioButtonLabel {
    margin: 0px;
}


#csNotifications br {
    display: none;
}


#csNotifications input[type="checkbox"]+label.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
    line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
    margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
    z-index: 2;
    position: relative;
    margin-top: 0;
}

.checkoutOneCoupon {
    background: aliceblue;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
    background: transparent;
    padding-top: 0;
}

.checkoutOneCoupon fieldset {
    background-color: aliceblue;
}

div#checkoutShippingContentChoose {
    margin-bottom: 0px;
}

#checkoutShippingChoices legend {
    margin: 0px !important;
    border: none;
}

#comments legend {
    margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneShipto legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneBillto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShipto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutComments {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutShippingMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#instructions {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.opc-block-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
    padding-top: 0;
    margin-top:1rem;
}

.opc-block-2:first-of-type {
      padding-top: 0;
    margin-top:1rem;
}

@media (min-width: 768px) {
    .opc-block-3 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    #checkoutShippingMethod {
        margin-top: 0rem;
        padding-top: 0rem;
    }


    #checkoutOneGuestInfo {
        margin-top: 0rem;
        padding-top: 0rem;
    }
}

Everything's looking great on that demo site!

[nicksab]

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
    font-size: 1.3rem;
    line-height: 25px;
    margin: 0;
    padding-bottom: 1rem;
}

#loginBody .opc-label {
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
    border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
    background: #8b008b;
    color: #fff;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
    background: transparent;
    color: #8b008b;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;


}

#loginOpcDefault .opc-block .buttonRow {
    padding-left: 0;
    padding-right: 0;
}

#opc-pwf {
    margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
    padding-top: 0rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    div.centerColumn#loginOpcDefault {
        display: flex !important;
        margin-bottom: 4rem;
    }

    #loginOpcDefault .opc-block .buttonRow {
        display: flex;
        justify-content: end;
    }

    #loginOpcDefault span.normal_button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #loginOpcDefault #loginDefaultHeading {
        position: absolute;
    }

    #loginOpcDefault .messageStackError {
        position: absolute;
        margin-top: -2rem;
        width: 100%;
        max-width: 1280px;
    }

    #loginOpcDefault .opc-block-3 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1;
    }

    #loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #loginOpcDefault .opc-block-2 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
        margin-left: 1rem;
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
        margin-right: 1rem;
    }

    #loginOpcDefault input.submit_button {
        width: auto !important;
    }

    #loginOpcDefault .button_checkout:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_login {
        width: auto;
    }

    #loginOpcDefault .button_login:hover {
        width: auto !important;
    }
}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
    color: #8b0000;
    font-weight: bold;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#checkoutoneBody label {
    padding: 0px;
}

#checkoutoneBody #shipping_billing {
    margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
    float: none;
    margin-bottom: 2rem;
    display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
    background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
    background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
    padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
    color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
    border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -66px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#checkoutoneBody .alert {
    padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
    margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
    display: none !important;
}

#checkoutoneBody span.normal_button {
    border: solid 1px #ffd700;
    margin: 0;
}

#checkoutoneBody span.normal_button:hover {
    background: transparent;
    border: solid 1px #FFD700;
    margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
    margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
    text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
    background: transparent !important;
    color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
    float: none;
    margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
    width: 100%;
}

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

#opc-bill-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#opc-ship-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#checkoutOneSubmit {
    float: none !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
    display: block !important;
}

#checkoutoneBody #messages-bill {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#checkoutoneBody .productTax {
    display: none !important;
}

#checkoutoneBody select,
fieldset select {
    margin-bottom: 0;
}



#checkoutoneBody #choices-bill,
#choices-ship {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: 100% !important;
}


#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: center;
}

@media (min-width: 768px) {


    #checkoutoneBody #checkoutOneSubmit {
        float: none !important;
        display: flex;
        justify-content: end;
    }

    #checkoutoneBody #checkoutOneEmail {
        float: none !important;
        text-align: right;
    }

    #checkoutoneBody #choices-bill select,
    #choices-ship select {
        width: auto !important;
    }

    #opc-ship-cancel {
        margin-bottom: 0 !important;
        display: block;
    }

    #opc-bill-cancel {
        margin-bottom: 0 !important;
    }

    #checkoutoneBody #checkoutOneShoppingCart legend {
        margin-bottom: 1rem !important;
    }

    #checkoutoneBody #cartContentsDisplay .edit-button {
        position: inherit !important;
        margin-top: 0;
    }

    #checkoutoneBody .opc-right {
        display: flex;
        justify-content: space-between;
    }

    #checkoutoneBody #opc-bill-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutoneBody #opc-ship-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutOneSubmit {
        float: right !important;
        margin-top: 0;
        margin-bottom: 1rem;
    }
}


@media (min-width: 992px) {

    #checkoutShippingMethod legend {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #checkoutoneBody #checkoutOneCartGroup {
        width: 49%;
        margin: auto;
    }

    #checkoutoneBody #instructions {
        clear: both;
    }

    #checkoutoneBody .clearBoth {
        display: none;
    }

    #checkoutOneCartGroup {
        margin-right: 0px !important;
    }

    #checkoutoneBody .floatingBox {
        width: 49% !important;
    }
}

/** checkout_success **/

#checkoutsuccessBody label {
    padding: 0;
    margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
    margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
    margin-bottom: 1rem;
    margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
    display: flex;
}

#checkoutoneconfirmationBody .footer {
    display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    #checkoutSuccessGuestPassword .button_create_account {
        width: auto !important;
    }
}

#orderstatusBody #accountTaxDisplay {
    display: none;
}

#orderstatusBody hr:first-of-type {
    display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
    margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
    margin-top: 2rem;
}

#checkoutOneBillto {
    margin-bottom: 1rem;
}

#opc-billing-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    /* Vertically align checkbox + label */
    gap: 8px;
    /* Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.custom-control.custom-checkbox label {
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    cursor: pointer;
    padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
    align-content: center;
    display: block;
}

.custom-control.custom-radio {
    display: flex;
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between radio and label */
    margin-bottom: 10px;
}


.custom-control.custom-radio input[type="radio"] {
    margin: 0;
    appearance: auto;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


.custom-control.custom-radio label {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


#checkoutOneShippingFlag {
    display: flex;
    align-items: center;
    /* Vertically center checkbox and label */
    gap: 8px;
    /* Optional: space between checkbox and label */
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

#checkoutOneShippingFlag label {
    margin: 0;
    line-height: 1.2;
    color: blueviolet;

}

#flat_flat-value {
    height: 31px;
    align-content: center;
}

#checkoutPayment .radioButtonLabel {
    margin: 0px;
}


#csNotifications br {
    display: none;
}


#csNotifications input[type="checkbox"]+label.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
    line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
    margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
    z-index: 2;
    position: relative;
    margin-top: 0;
}

.checkoutOneCoupon {
    background: aliceblue;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
    background: transparent;
    padding-top: 0;
}

.checkoutOneCoupon fieldset {
    background-color: aliceblue;
}

div#checkoutShippingContentChoose {
    margin-bottom: 0px;
}

#checkoutShippingChoices legend {
    margin: 0px !important;
    border: none;
}

#comments legend {
    margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneShipto legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneBillto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShipto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutComments {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutShippingMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#instructions {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.opc-block-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
    padding-top: 0;
    margin-top:1rem;
}

.opc-block-2:first-of-type {
      padding-top: 0;
    margin-top:1rem;
}

@media (min-width: 768px) {
    .opc-block-3 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    #checkoutShippingMethod {
        margin-top: 0rem;
        padding-top: 0rem;
    }


    #checkoutOneGuestInfo {
        margin-top: 0rem;
        padding-top: 0rem;
    }
}

I haven't try my site yet but the demo looks amazing.

[barco57]

I decided to play with this template. I find that there is a lot of stuff in the stylesheet_colors that is not color related. Like I was trying to figure out why the cat tabs was not showing and finally figured out that

#navCatTabs {
    display:none;
}

was in the stylesheet_colors, along with a large list of other things set to display:none
I find that to be weird.
Additionally, the only page on the site that uses the right column is the home page, all other pages the right column disappears.

[chadlly2003]

barco57,

Make sure you grab the latest version from GitHub. I will update the zencart plugin this week.

This new version is built off the original styles from the classic design, so the main stylesheet might look a bit familiar—or even a little confusing at first. The key thing to keep in mind is that any CSS changes should be made in the zcustom_stylesheet. That file is set up to override existing styles, so you can simply add or adjust your styles there without needing to modify the original CSS files.

Also, you’ll notice that some elements are hidden using display: none. This is intentional and primarily used to help create the desired layout and responsive behavior for the template. It's a useful trick for maintaining a consistent look and feel across different screen sizes.

[nicksab]

Nick all is good. If you want to see a demo version of the OPC on the new redesign template you can just go to this linkhttp://www.zencartdemo.com/. Now that being said. Lets try adding the new css style sheet to your template and see what it does. It is supposed to look exactly like the demo. But you made a lot of changes so we may have to make some minor adjustments

File Name needs to be stylesheet_zcustom_opc.css
save this file to includes/templates/responsive_classic/css/stylesheet_zcustom_opc.css

i also uploaded the files to the github version as well. Let me know how it goes

/** loginBody **/

#loginOpcDefault h2 {
    font-size: 1.3rem;
    line-height: 25px;
    margin: 0;
    padding-bottom: 1rem;
}

#loginBody .opc-label {
    margin-bottom: 0.5rem;
    padding-top: 0px;
}

#loginOpcDefault .button_create_account:focus {
    border: solid 1px #AC171D !important
}

#loginOpcDefault .button_checkout {
    background: #8b008b;
    color: #fff;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;

}

#loginOpcDefault .button_checkout:hover {
    background: transparent;
    color: #8b008b;
    min-height: 47.6px;
    border: solid 1px #8b008b !important;


}

#loginOpcDefault .opc-block .buttonRow {
    padding-left: 0;
    padding-right: 0;
}

#opc-pwf {
    margin-top: -.5rem;
}

#checkoutOneGuestInfo legend {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#checkoutoneBody .messageStackError {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#loginOpcDefault .buttonRow {
    padding-top: 0rem;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {

    div.centerColumn#loginOpcDefault {
        display: flex !important;
        margin-bottom: 4rem;
    }

    #loginOpcDefault .opc-block .buttonRow {
        display: flex;
        justify-content: end;
    }

    #loginOpcDefault span.normal_button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #loginOpcDefault #loginDefaultHeading {
        position: absolute;
    }

    #loginOpcDefault .messageStackError {
        position: absolute;
        margin-top: -2rem;
        width: 100%;
        max-width: 1280px;
    }

    #loginOpcDefault .opc-block-3 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1;
    }

    #loginOpcDefault .opc-block-3:nth-last-of-type(3n) {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    #loginOpcDefault .opc-block-2 {
        width: auto !important;
        margin-top: 4.5rem;
        flex: 1
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(2n) {
        margin-left: 1rem;
    }

    #loginOpcDefault .opc-block-2:nth-last-of-type(3n) {
        margin-right: 1rem;
    }

    #loginOpcDefault input.submit_button {
        width: auto !important;
    }

    #loginOpcDefault .button_checkout:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account {
        width: auto !important;
    }

    #loginOpcDefault .button_create_account:hover {
        width: auto !important;
    }

    #loginOpcDefault .button_login {
        width: auto;
    }

    #loginOpcDefault .button_login:hover {
        width: auto !important;
    }
}

/** checkoutoneBody **/

#checkoutoneBody #checkoutOneGuestInfo p {
    color: #8b0000;
    font-weight: bold;
    margin-top: 0rem;
    margin-bottom: 1rem;
}

#checkoutoneBody label {
    padding: 0px;
}

#checkoutoneBody #shipping_billing {
    margin-left: 0;
}

#checkoutoneBody .opc-buttons>div:first-child {
    float: none;
    margin-bottom: 2rem;
    display: flex;
}

#checkoutoneBody #cartContentsDisplay tr:nth-child(even):not(:last-child) {
    background: #F8F8FF;
}

#checkoutoneBody .cartTableHeading {
    background-color: transparent !important;
}

#checkoutoneBody #cartContentsDisplay th,
td {
    padding: 0.5rem !important;
}

#checkoutoneBody #checkoutPaymentMethod .important {
    color: #8b0000 !important;
}

#checkoutoneBody #cartOrderTotals {
    border: none;
}

#checkoutoneBody #cartContentsDisplay .edit-button {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: -66px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#checkoutoneBody #checkoutOneShoppingCart legend {
    margin-bottom: 5rem !important;
}

#checkoutoneBody #cartContentsDisplay .productPrice {
    display: block !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

#checkoutoneBody .alert {
    padding-left: 0;
}

#checkoutoneBody #opc-bill-edit {
    margin-top: 1rem;
}

#checkoutoneBody #opc-ship-edit {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #checkoutPayment legend {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

#checkoutOneGuestInfo .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutPaymentMethod .clearBoth {
    display: none;
}

#checkoutoneBody #checkoutOneGuestInfo .opc-right:nth-of-type(1) {
    display: none !important;
}

#checkoutoneBody span.normal_button {
    border: solid 1px #ffd700;
    margin: 0;
}

#checkoutoneBody span.normal_button:hover {
    background: transparent;
    border: solid 1px #FFD700;
    margin: 0 !important;
}

#checkoutoneBody .button.small_edit:hover {
    margin: 1rem;
}

#checkoutoneBody #ccTotalHeading {
    text-align: center !important;
}

#checkoutoneBody .button_confirm_order:hover {
    background: transparent !important;
    color: #006400 !important;
}

#checkoutoneBody .cartAttribsList {
    float: none;
    margin-top: 0.5rem !important;
}

#checkoutoneBody .floatingBox {
    width: 100%;
}

#checkoutoneBody .opc-view {
    position: relative;
    z-index: 2;
    box-shadow: 3px 3px 5px 6px #ccc;
    padding: 1rem;
    background: #fff;
    margin-bottom: 1.5rem;
    border-radius: 5px;
}

#opc-bill-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#opc-ship-cancel {
    margin-bottom: 1rem !important;
    display: block;
}

#checkoutOneSubmit {
    float: none !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #cartOrderTotals br {
    display: block !important;
}

#checkoutoneBody #messages-bill {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#checkoutoneBody #messages-ship {
    margin-top: 1rem;
    margin-bottom: 1rem;
}


#checkoutoneBody .productTax {
    display: none !important;
}

#checkoutoneBody select,
fieldset select {
    margin-bottom: 0;
}



#checkoutoneBody #choices-bill,
#choices-ship {
    display: flex !important;
    margin-bottom: 1rem !important;
}

#checkoutoneBody #choices-bill select,
#choices-ship select {
    width: 100% !important;
}


#checkoutoneBody #checkoutOneSubmit {
    float: none !important;
}

#checkoutoneBody #checkoutOneEmail {
    float: none !important;
    text-align: center;
}

@media (min-width: 768px) {


    #checkoutoneBody #checkoutOneSubmit {
        float: none !important;
        display: flex;
        justify-content: end;
    }

    #checkoutoneBody #checkoutOneEmail {
        float: none !important;
        text-align: right;
    }

    #checkoutoneBody #choices-bill select,
    #choices-ship select {
        width: auto !important;
    }

    #opc-ship-cancel {
        margin-bottom: 0 !important;
        display: block;
    }

    #opc-bill-cancel {
        margin-bottom: 0 !important;
    }

    #checkoutoneBody #checkoutOneShoppingCart legend {
        margin-bottom: 1rem !important;
    }

    #checkoutoneBody #cartContentsDisplay .edit-button {
        position: inherit !important;
        margin-top: 0;
    }

    #checkoutoneBody .opc-right {
        display: flex;
        justify-content: space-between;
    }

    #checkoutoneBody #opc-bill-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutoneBody #opc-ship-edit {
        display: flex;
        justify-content: end !important;
        margin-top: 0;
    }

    #checkoutOneSubmit {
        float: right !important;
        margin-top: 0;
        margin-bottom: 1rem;
    }
}


@media (min-width: 992px) {

    #checkoutShippingMethod legend {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #checkoutoneBody #checkoutOneCartGroup {
        width: 49%;
        margin: auto;
    }

    #checkoutoneBody #instructions {
        clear: both;
    }

    #checkoutoneBody .clearBoth {
        display: none;
    }

    #checkoutOneCartGroup {
        margin-right: 0px !important;
    }

    #checkoutoneBody .floatingBox {
        width: 49% !important;
    }
}

/** checkout_success **/

#checkoutsuccessBody label {
    padding: 0;
    margin-bottom: 0.5rem;
}

#checkoutSuccessGuestPassword .custom-control-label {
    margin: 0;
}

#checkoutSuccessGuestPassword .button_create_account {
    margin-bottom: 1rem;
    margin-top: 1rem
}

#checkoutSuccessGuestPassword .custom-control {
    display: flex;
}

#checkoutoneconfirmationBody .footer {
    display: none;
}

#checkoutoneconfirmationBody #checkoutOneConfirmationLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
    #checkoutSuccessGuestPassword .button_create_account {
        width: auto !important;
    }
}

#orderstatusBody #accountTaxDisplay {
    display: none;
}

#orderstatusBody hr:first-of-type {
    display: none;
}

#orderstatusBody #myAccountShipInfo h3 {
    margin-top: 2rem;
}

#orderstatusBody #myAccountPaymentInfo h4 {
    margin-top: 2rem;
}

#checkoutOneBillto {
    margin-bottom: 1rem;
}

#opc-billing-title {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

/** input and radio for moble and tablet alignment **/

.custom-control.custom-checkbox {
    display: flex;
    align-items: center;
    /* Vertically align checkbox + label */
    gap: 8px;
    /* Space between checkbox and label */
}

.custom-control.custom-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0px;
}

.custom-control.custom-checkbox label {
    margin: 0;
    line-height: 1.2;
    display: inline-block;
    cursor: pointer;
    padding-left: 0px;
}

#checkoutPayment .radioButtonLabel {
    align-content: center;
    display: block;
}

.custom-control.custom-radio {
    display: flex;
    align-items: center;
    /* Vertically center items */
    gap: 8px;
    /* Space between radio and label */
    margin-bottom: 10px;
}


.custom-control.custom-radio input[type="radio"] {
    margin: 0;
    appearance: auto;
    vertical-align: middle;
    width: 16px;
    height: 16px;
}


.custom-control.custom-radio label {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}


#checkoutOneShippingFlag {
    display: flex;
    align-items: center;
    /* Vertically center checkbox and label */
    gap: 8px;
    /* Optional: space between checkbox and label */
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding-top: 0rem;
}

#checkoutOneShippingFlag input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

#checkoutOneShippingFlag label {
    margin: 0;
    line-height: 1.2;
    color: blueviolet;

}

#flat_flat-value {
    height: 31px;
    align-content: center;
}

#checkoutPayment .radioButtonLabel {
    margin: 0px;
}


#csNotifications br {
    display: none;
}


#csNotifications input[type="checkbox"]+label.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1em;
    line-height: 1.2;
}

#csNotifications input[type="checkbox"] {
    margin-top: 1px;
}

/** other **/

#checkoutOneHeading {
    z-index: 2;
    position: relative;
    margin-top: 0;
}

.checkoutOneCoupon {
    background: aliceblue;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 1rem;
    margin-bottom: 1rem;

}

.checkoutOneCoupon legend {
    background: transparent;
    padding-top: 0;
}

.checkoutOneCoupon fieldset {
    background-color: aliceblue;
}

div#checkoutShippingContentChoose {
    margin-bottom: 0px;
}

#checkoutShippingChoices legend {
    margin: 0px !important;
    border: none;
}

#comments legend {
    margin-bottom: 0px !important;
}

.checkoutOneCoupon legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneShipto legend {
    margin-top: 0px !important;
    padding-top: 0px !important
}

#checkoutOneBillto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShipto {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutComments {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutShippingMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutoneBody #checkoutPaymentMethod {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneShoppingCart {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#instructions {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

#checkoutOneGuestInfo {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.opc-block-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.opc-block-3:first-of-type {
    padding-top: 0;
    margin-top:1rem;
}

.opc-block-2:first-of-type {
      padding-top: 0;
    margin-top:1rem;
}

@media (min-width: 768px) {
    .opc-block-3 {
        padding-top: 0rem;
        padding-bottom: 1rem;
    }
}

@media (min-width: 992px) {
    #checkoutShippingMethod {
        margin-top: 0rem;
        padding-top: 0rem;
    }


    #checkoutOneGuestInfo {
        margin-top: 0rem;
        padding-top: 0rem;
    }
}

Finally managed to get the opc css file on my site.

It looks great and it is almost there layout wise.

I just a couple of issues:

- cart only fills up half of the column

- when the hamburger menu is clicked, the overlay of OPC ( gray shadow) covers the menu and makes it unclickable

- input fields are too big

Thank you in advance for the help