Layer Title close icon on touch screen

  • Resolved kacor

    (@kacor)


    4 years, 3 months ago

    Hi Marc,

    While the “X” and “>” icons work well on desktop when you hover over with the cursor, on touchscreen devices only the X icon shows since you cannot hover and that is misleading for customers (already got feedback). They think it closes the entire configurator… Yeah, well… What can I do? ??

    I was looking for an option to replace these icons with some text maybe.
    Or do you have any better idea?

    Thanks,
    Laszlo

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Marc Lacroix

    (@marcusig)

    Hi Laszlo,

    There is some text in the button already, it’s just hidden using CSS.
    You can customize the buttons to look how you want using a little bit of CSS.

    If you wish to use “>” all the time on mobile, you can use this code snippet: 

    @media (max-width: 780px) { 
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.layer-choices-title > span a.close::before,
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.layer-choices-title > span a.close::after {
        width: 15px;
        transform-origin: 100%;
    }
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.layer-choices-title > span a.close::before {
        transform: translateX(8px) rotate(-35deg);
    }
    .mkl_pc .mkl_pc_container .mkl_pc_toolbar section.choices .layer_choices li.layer-choices-title > span a.close::after {
        transform: translateX(8px) rotate(35deg);
    }
}

    Marc.

    Thread Starter kacor

    (@kacor)

    I forgot to tell: THANKS A LOT! ??
    Works like charm!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Layer Title close icon on touch screen’ is closed to new replies.