Sale label position on mobile - by Adrian

This topic has 8 replies, 3 voices, and was last updated 4 years, 4 months ago ago by Rose Tyler

  • Avatar: Adrian
    Adrian
    Participant
    July 7, 2020 at 13:47

    Hello,

    I want to show the sale label in the center of the product image, on mobile. How do i do it?
    Thanks

    7 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 7, 2020 at 23:38

    Hello,

    Do you want vertical and horizontal align http://prntscr.com/tdp8ix or horizontal only http://prntscr.com/tdp928 ?

    Regards

    Avatar: Adrian
    Adrian
    Participant
    July 8, 2020 at 01:06

    Like in the first screenshot. Centered both horizontally and vertically .

    Thank you!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    July 8, 2020 at 10:58

    Hello,

    Add the below code to Theme Options > Custom CSS > Mobile custom CSS

    .content-product .onsale.left {
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%);
    }

    Regards

    Avatar: Adrian
    Adrian
    Participant
    July 9, 2020 at 12:13

    Thanks, can you, please, help me move it here? https://prnt.sc/teo5c8

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 9, 2020 at 12:25
    .content-product .onsale.left {
        left: 50%;
        bottom:-5%;
        top: unset;
        transform: translate(-50%);
    }

    Regards

    Avatar: Adrian
    Adrian
    Participant
    July 9, 2020 at 13:20

    Thanks, unfortunately , when the product description is longer, it pushes the box down and doesn’t look great. I tried modifying your CSS to make it show on top of the product description, like this https://prnt.sc/tephu3 , but i couldn’t do it.

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 9, 2020 at 14:40

    Sorry, but there is no such possibility.

    Regards

  • Viewing 8 results - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.