Some Bug about css button

  • Resolved semplicewebsite

    (@semplicewebsite)


    3 years, 10 months ago

    Hello. Great Theme. However, I encountered some bugs with woocommerce regarding the style of the buttons. I emphasize that I use woocommerce in Italian and therefore the texts are in this language.

    I have a display problem on the product catalog page when the button appears on hover. Practically the price goes into the button. I attach figure: https://ibb.co/gZDqy8G

    I have another problem in the cart page, again with the buttons. In the mobile version the text comes out of the button. https://ibb.co/Khq19vt

    Then in the checkout section when I want to enter the promotional code, again from mobile, the text in the button appears as in the figure: https://ibb.co/28yCT1P

    For both a grammatical and an aesthetic factor, it would be advisable for the button to appear below the field to insert the coupon, leaving the text to be read extended.

    I tried to solve with a bit of css but it is a more or less remedied job and I am not sure that it will work in the future, in view of probable updates

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hey,
    1. The button is designed to be one line, if you are using a language with longer text and your columns are smaller you can either change the font size in the theme settings or change the way the button appears, for example you can have it always present and there wouldn’t be an overlap. Or you can use custom css. I would be happy to help with custom css if you send a link.

    2. Similar ^ You can use this css:

    @media screen and (max-width: 719px) {
   .woocommerce-cart table.cart td.actions .coupon .input-text+.button, .woocommerce-cart table.cart td.actions .coupon .input-text {
       float:none!important;
       width: 100% !important;
       margin: 0 0 5px 0
   }
}

    3. For that you can use css like this:

    .woocommerce form.checkout_coupon .form-row-first, .woocommerce form.checkout_coupon .form-row-last {
    float: none !important;
    width: 100% !important;
}

    Ben

    Thread Starter semplicewebsite

    (@semplicewebsite)

    Thank you very much!!! You’re very kind. For the shopping cart button I set always present as you suggested. Thanks again!

    Thread Starter semplicewebsite

    (@semplicewebsite)

    Hello, if it can be useful I have optimized your code in this way for the text “Aggiungi al Carrello” (Add to Cart). In Italy, unfortunately, it can be said that it is the only way to say it. The text is necessarily long compared to English

    @media screen and (max-width: 719px) {
   .woocommerce-cart table.cart td.actions .coupon .input-text+.button, .woocommerce-cart table.cart td.actions .coupon .input-text {
       float:none!important;
		   height:auto!important;
       width: 100%!important;
       margin: 0 0 5px 0;
		   line-height:20px;
		   padding-top:5px;
		   padding-bottom:5px;
   }
}

    Thanks!

    Thread Starter semplicewebsite

    (@semplicewebsite)

    Thanks to you! So far it’s the most versatile and beautiful theme I’ve ever tried. I wish you a good evening. Hope you can continue to develop other such themes as well!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Some Bug about css button’ is closed to new replies.