How to display product name and price in line on mobile devices?

  • Profile Image
    zapin
    Asked on January 29, 2017 at 12:29 PM
    When my phone is held horisontal my form looks good, but when vertical prices aren`t below each other, is it possible to get this fixed, so it would look ok no matter what way you hold your device (haven`t tested on tablet) ?
  • Profile Image
    Kiran
    Answered on January 29, 2017 at 02:43 PM

    Due to the width of the screen of mobiles is less and considering the length of the label text and the product image, they are displaying in two lines. If you want to display them in the same line, you may consider reducing the font size of the product label and price. Please try injecting the following CSS code to the form so that they should be displaying in the same line. If any of the product labels are still displaying two lines, you may further try reducing the font size.

    @media screen and (max-width: 480px) and (min-width: 10px) {

        span.form-product-details > b {

    margin-top: 0px !important;

    font-size: 12px;

        }

    .form-product-name {

        font-size: 14px;

    }

    }

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.