• Resolved hantekaudio

    (@hantekaudio)


    The Trolley on mobile is very small and for some difficult to see.

    Is it some how i can change it to a button or change the icon size and padding?

    I have tried the CSS in an earlier post (this codehttps://gist.github.com/marcusig/0f4e9df7b4bd256bc0a053bbcf89daca) and it looked ok, but the qty field is messing it up. Is in any code i can use to have the same option, but without the qty field?

    • This topic was modified 2 years, 2 months ago by hantekaudio.
    • This topic was modified 2 years, 2 months ago by hantekaudio.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Contributor Marc Lacroix

    (@marcusig)

    Hi there,

    Could you share the URL to the product with the issue?

    Marc

    Thread Starter hantekaudio

    (@hantekaudio)

    Hi,

    Thanks!

    Here is the test page: https://www.hantek.no/produkt/tester/

    It works great on computer/desktop, but on mobile – the pricing is wrong. I was able to remove the QTY field, because i removed it from the product it self. So that worked.

    But the pricing on smartphones is strange, it dont fits. Seems the rows is to small on responsive. Can it be fixed easy by cahnging the CSS code?

    Plugin Contributor Marc Lacroix

    (@marcusig)

    You can try this CSS, which will resize the element and reduce the price font-size a bit:

    @media(max-width: 660px) {
      .mkl_pc .mkl_pc_container footer .footer__section-right {
          width: calc(100% - 60px);
      }
    
      .mkl_pc .mkl_pc_container .form.form-cart .pc-total-price {
          font-size: 1.2em;
      }
    }
    Thread Starter hantekaudio

    (@hantekaudio)

    Yey! It worked.

    But is it some how to controll the size of the “buy” button? It seems it is auto, and become very big. That is inside the configurator and on the product page (phone only). It fills out the screen on product page and the row.

    To fit our “brand”. We like the buttons in one size and not i capital letters. Just like the “Subtmit” button when writing a reply here in the forum.

    Plugin Contributor Marc Lacroix

    (@marcusig)

    But is it some how to controll the size of the “buy” button?

    No this only changes the size of the element containing the button and price.

    To fit our “brand”. We like the buttons in one size and not i capital letters. Just like the “Subtmit” button when writing a reply here in the forum.

    I see. The uppercase is inherited from your theme.
    Try this CSS instead of the previous one:

    @media(max-width: 660px) {
    .mkl_pc .mkl_pc_container footer .footer__section-right {
        width: calc(100% - 60px);
    }
    
    .mkl_pc .mkl_pc_container .form.form-cart .pc-total-price {
        font-size: 1.2em;
    }
    
    .is_configurable button.configure-product,
    .mkl_pc .mkl_pc_container footer .form.form-cart .pc_configurator_form button {
        display: inline-block;
        width: auto;
    }
    
    .mkl_pc .mkl_pc_container footer .form.form-cart .pc_configurator_form {
        width: auto;    
    }
    
    .button {
        text-transform: none;
    }
    }
    Thread Starter hantekaudio

    (@hantekaudio)

    Thanks! It worked!

    Great support 🙂

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Icon on mobile’ is closed to new replies.