Button issues in mobile modes (wrong alignment and misplacing)

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 16 replies, 2 voices, and was last updated 8 years by David Martin – Support.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Back to forum

Posted in: Atelier
November 23, 2016 at 5:02 pm #303256

haastee
Member

Post count: 47

Hello,

I´m having issues with the look of buttons (ADD TO CART, WISHLIST and PRODUCT QUANTITY) – see attached screenshots:

1) iPad mini 2: in portrait mode and QUICKVIEW all the buttons are missaranged (in landscape mode everything looks fine).

2) iPhone 4s: in QUICKVIEW buttons are wrong, in SINGLE PRODUCT VIEW also.

I thought it´s connected with the custom button text (“hinzufügen”) but I changed the text back to “add to cart” and the problem still is there.

Thats the custom code in functions.php for the custom text I used:

add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘woo_custom_cart_button_text’ ); // 2.1 +

function woo_custom_cart_button_text() {

return __( ‘HINZUFÜGEN’, ‘woocommerce’ );

}

Also when I deleted that code completely the problem was still occuring.

Thanks,
Michael

Attachments:
You must be logged in to view attached files.

November 24, 2016 at 6:28 pm #303524

David Martin – Support
Moderator

Post count: 20834

What theme version are you using?

Please make sure you have updated to the latest theme version 2.4+ and all plugins are updated.

Please add a WP login also.

November 25, 2016 at 9:14 am #303596

haastee
Member

Post count: 47

I´m using Atelier Version: 2.4.14 (with Child Theme) and all plugins have been up to date…

November 27, 2016 at 9:05 am #303818

haastee
Member

Post count: 47

This reply has been marked as private.

November 29, 2016 at 10:17 am #304123

David Martin – Support
Moderator

Post count: 20834

Those login details are not working. Can you check?

Please can you disable all plugins leaving only Swift Framework and WooCommerce active. Please also disable the child theme.

November 29, 2016 at 10:24 am #304126

haastee
Member

Post count: 47

Login should work now…

November 29, 2016 at 2:01 pm #304180

haastee
Member

Post count: 47

I disabled (deleted) all custom CSS – no change.
I deleted all custom input in functions.php – no change.

That issue also is also visible on desktop when sizing the browser to mobile size.

Attachments:
You must be logged in to view attached files.

November 29, 2016 at 2:02 pm #304182

haastee
Member

Post count: 47

This reply has been marked as private.

November 30, 2016 at 7:33 pm #304542
David Martin – Support
Moderator

Post count: 20834
Hi,

Please add this to Theme Options => Custom CSS:
```
@media only screen and (max-width: 479px) {
.woocommerce form.cart .yith-wcwl-add-to-wishlist, 
.yith-wcwl-add-to-wishlist.oos {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
#jckqv .cart .single_add_to_cart_button {
    width: 100%;
    margin-top: 20px;
    float: left!important;
}
.woocommerce .cart .yith-wcwl-add-to-wishlist, .yith-wcwl-add-to-wishlist.oos {
  width: 100%;
  text-align: center;
}
#jckqv .quantity {
    width: 25%!important;
    clear: none;
}
#jckqv .quantity {
    display: inline-block;
}
}
```
December 1, 2016 at 9:45 am #304595

haastee
Member

Post count: 47

The add-to-cart- and wishlist-buttons are working fine now – but the quantity arrows are still out of order (2nd screenshot shows how the wishlist-button also is in wrong size and alignment when in tablet-screen-size)

Attachments:
You must be logged in to view attached files.

December 2, 2016 at 3:13 pm #304935

David Martin – Support
Moderator

Post count: 20834

Hi,

What browser size is that?

Can you screenshot the developer view so I have a size/device reference. Like so:

December 4, 2016 at 3:41 pm #305075

haastee
Member

Post count: 47

Here you are:

Attachments:
You must be logged in to view attached files.

December 6, 2016 at 12:52 pm #305303
David Martin – Support
Moderator

Post count: 20834
Please add these:
```
@media only screen and (max-width: 479px) {
.woocommerce .quantity .qty-adjust {
    position: absolute;
    top: 0;
    left: 43px;
    right: auto;
}
#jckqv .cart .single_add_to_cart_button {
    margin-top: 0px;
}
}
```
```
@media(min-width:768px) and (max-width:800px) {
.woocommerce form.cart .yith-wcwl-add-to-wishlist, 
.yith-wcwl-add-to-wishlist.oos {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
#jckqv .cart .single_add_to_cart_button {
    width: 100%;
    margin-top: 0px;
    float: left!important;
}
.woocommerce .cart .yith-wcwl-add-to-wishlist, .yith-wcwl-add-to-wishlist.oos {
  width: 100%;
  text-align: center;
}
#jckqv .quantity {
    width: 25%!important;
    clear: none;
}
#jckqv .quantity {
    display: inline-block;
}
  .woocommerce .quantity .qty-adjust {
    position: absolute;
    top: 0;
    left: 43px;
    right: auto;
}
}
```
December 6, 2016 at 1:04 pm #305313

haastee
Member

Post count: 47

Adding this css to the existing ones in your first replies or substituting them?

December 6, 2016 at 1:45 pm #305326

haastee
Member

Post count: 47

I tried both ways (adding and exchanging) – the overlapping is gone now, but it still doesn´t work right (see screenshots).

From 800px screen size in a standard browser it seems fine (except the wishlist button is not also enlarged to full size), at 799px it starts to look wrong. Then at 767px screen size (single product view changes to mode without sidebar) the quantity field is in order again (but add-to cart and wishlist-buttons not resizing to full width).

At 479px the next change happens and it hops into the wrong display again (add-to cart and wishlist-buttons are resizing to full width but wishlist button is to far below the add-to-cart button).

In Quickview it looks like on the screenshots (please check all the different screensizes in your browser, you will see what happens at which screen size).

Michael

Attachments:
You must be logged in to view attached files.
Back to forum

Posted in: Atelier