Okay
  Public Ticket #1862455
Mobile text alignment
Closed

Comments

  •  1
    aramfranke started the conversation
    January 21, 2019 at 8:23am

    Hi, on my shop page in mobile view the product title gets displayed incorrectly, so that it's outside of my hover box (screenshot). I've tried changing the font sizes in Laborator but it didn't have any effect. Is it possible to restrict the text to the white box and center it or change the font size only in mobile view?

    Thank you

    {"wp":{"use":false,"adminUrl":"shop.wiltw.blog/wp-admin","username":"","password":""},"ftp":{"use":false,"url":"","port":"","user":"","password":"","path":""}}
  • [deleted] replied
    January 21, 2019 at 9:29am

    Hi aramfranke,

    You can choose to show 1 product per row in mobile devices because your product names are long.

    medium
    (view on a new page)

    When you do that then your shop products will look much nicer in mobile devices.

    Have a great day!

  •  1
    aramfranke replied
    January 21, 2019 at 10:06am

    Hi Ylli, I've tried that but they're too large and is too much scrolling. Is it possible to adjust the text in the two-row layout?

  •  1
    aramfranke replied
    January 21, 2019 at 11:46am

    Or increasing the size of the box would also solve this problem. But it obviously ins't supposed to be that way.

  • [deleted] replied
    January 21, 2019 at 1:28pm

    Hi,

    Please add the code below to your Custom CSS area:

    .woocommerce .products .product.catalog-layout-distanced-centered .product-internal-info {
    top: 15px !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
}
.woocommerce .products .product.catalog-layout-distanced-centered .item-info h3 a {
    font-size: 18px !important;
}
.woocommerce .products .product .item-info .price ins, .woocommerce .products .product .item-info .price>.amount {
    font-size: 16px !important;
}

  •  1
    aramfranke replied
    January 21, 2019 at 6:05pm

    Thank you, it works great! Is it possible to only apply it to the mobile view so that the desktop view stays the same?

  • [deleted] replied
    January 22, 2019 at 8:31am

    Hi aramfranke,

    Please remove the old code and add this new one:

    @media screen and (max-width: 768px) {
    .woocommerce .products .product.catalog-layout-distanced-centered .product-internal-info {
        top: 15px !important;
        bottom: 15px !important;
        left: 15px !important;
        right: 15px !important;
    }
    .woocommerce .products .product.catalog-layout-distanced-centered .item-info h3 a {
        font-size: 18px !important;
    }
    .woocommerce .products .product .item-info .price ins, .woocommerce .products .product .item-info .price>.amount {
        font-size: 16px !important;
    }    
}

    Have a great day!

  •  1
    aramfranke replied
    January 22, 2019 at 8:42am

    Thank you very much! This worked :)

  • [deleted] replied
    January 22, 2019 at 8:44am

    Glad to hear thatsmile.png

    Will set this ticket as solved from here.