• Resolved roycedigital

    (@roycedigital)


    Hello,

    I still have a problem with the alignment on checkout. Im not sure, if you can See my answer in the old topic.

    On desktop it works but it doesn‘t look good on mobile especially when the product title is a little bit longer.

    You can see it on the Website (cart)

    Here you can find a Screenshot: Here

    Thanks and Regards
    Julia

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello @roycedigital,

    Thanks for contacting us.
    I am not able to visit and check the related page as it is currently in maintenance mode.
    Please give us a chance to check the issue and provide a related custom CSS solution ASAP.

    Let us know for further assistance.

    Regards
    Tanvir

    Thread Starter roycedigital

    (@roycedigital)

    Hi,

    thanks for your answer.
    We went live again. So now you can check the website.
    https://notyourbabe.de/checkout-neu/

    Custom CSS
    .comments-area a, .page-content a {
    text-decoration: none;
    }

    `.shopengine-checkout-review-order dl.variation {
    position: absolute;
    margin-top: 8%;
    left: 25%;
    }

    .elementor-52520 .elementor-element.elementor-element-24604483 .shopengine-checkout-review-order .shopengine-order-review-product img {
    height: 135px;
    width: 110px;
    }

    /*subtola text and value align mobile view*/
    @media only screen and (max-width: 768px) {
    .shopengine-checkout-review-order dl.variation {
    position: absolute;
    margin-top: 8%;
    left: 27%;
    }

    .elementor-52520 .elementor-element.elementor-element-24604483 .shopengine-checkout-review-order .shopengine-order-review-product img {
    height: 100px;
    width: 80px;
    }
    }

    Hello @roycedigital ,

    Please use the below custom css that will solve the text issue for mobile devices.

    @media only screen and (max-width: 768px) {
    .shopengine-checkout-review-order td.product-name img.attachment-full {
    padding: 15px !important
    }
    }

    Let us know for further assistance.

    Regards
    Tanvir

    Thread Starter roycedigital

    (@roycedigital)

    Hi Tanvir,

    thanks, now the product title and variation is okay. But now the image is smaller and with padding on the left.

    Here you can see: here
    And how it was before (we want the picture like that): here

    Thanks you!

    Regards Julia

    Hello @roycedigital ,

    You can use the below code instead of the previous code.

    @media only screen and (max-width: 768px){
    .shopengine-order-review-product td.product-name {
        line-height: unset !important;
    }
    .shopengine-checkout-review-order dl.variation {
        margin-top: auto;
        left: 30%;
    }
    }

    It will fix the issue.

    Regards
    Tanvir

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Checkout Alignment Variation and Titel (mobile)’ is closed to new replies.