Small screen responsiveness

  • Resolved zulkifar2

    (@zulkifar2)


    3 years, 11 months ago

    Hi everybody, I’m a noob.

    I have a problem with the Checkout page.
    On small screens only, the text of a table cell is split into two lines.

    Let’s see if this screenshot is enough for you to understand and help me:
    https://www.davideboscolo.com/personale/Annotazione%202020-12-22%201205452.png

    As you can see the line “Kease x2” gets split. If I could remove the product-quantity class from the strong tag, the problem would go away, but I don’t know how I can do that. Should I add some code into function.php?

    I’ve tried something like this to see if I could edit the class in some way…
    .product-quantity{
    color:red;
    }
    …but it doesn’t seem to do anything.

    Ideas?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Stuart Duff – a11n

    (@stuartduff)

    Automattic Happiness Engineer

    Hi @zulkifar2,

    Could you provide a link to your site so we can see the CSS in real-time please.

    Thanks

    Thread Starter zulkifar2

    (@zulkifar2)

    Yes sure,

    https://www.davideboscolo.com/product/kease/
    password 321
    then scroll down and test-buy the product until you reach the checkout page

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    Thank you for providing the URL and access password. It looks like the following CSS should make it so that quantity stays on the same line in the table:

    
@media only screen and (max-width: 767px) {
	.responsive #order_review .shop_table .product-quantity {
	    display: inline !important;
	}
}

    You can add that to the “Additional CSS” section of your Customizer (Appearance > Customize).

    quantity
    Link to image: https://d.pr/i/BtCHIu

    Thread Starter zulkifar2

    (@zulkifar2)

    kellymetal you are legend!
    Thank you so much!!

    Plugin Support kellymetal a11n

    (@kellymetal)

    Hi there,

    kellymetal you are legend!
    Thank you so much!!

    I’m glad to hear that did the trick! You are very welcome. : )

    I’m going to mark this thread as resolved. If you have any further questions, please start a new thread.

    Have a wonderful day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Small screen responsiveness’ is closed to new replies.