Display issues on iPhones

I have a couple of little display issues in my shopping cart that appear only on iOS mobile devices.

In the cart, 2 “x” appear but I only need the blue one:
https://prnt.sc/p5txz6

The second issue is on product page: after choosing the type of package the site goes left past the edge of the screen:
https://prnt.sc/p5u0jk

  • Dimitris
    • Support Star

    Hello there Emilia

    1. Could you please use the following CSS rule? You can add it in Appearance -> Customize -> Additional CSS:

    .woocommerce a.remove:hover::after {
      content: none;
    }

    2. I’m not able to replicate this in desktop Safari, as I did with the previous issue, so I’m asking for my colleagues to try to replicate it. We’ll keep you posted here as soon as possible.

    Meanwhile, if you could connect your website to our Hub and grant support access, it’d be great! :slight_smile:

    how to connect your site:
    https://premium.wpmudev.org/docs/getting-started/installing-the-wpmu-dev-dashboard-plugin/

    how to grant support access:
    https://premium.wpmudev.org/docs/getting-started/getting-support/#enabling-support-access

    Thank you,
    Dimitris

  • Nahid
    • Tech Support

    Hey there Emilia !
    Hope you are doing well today!

    Regarding the second issue, could you please try adding the following CSS code in your WordPress Dashboard -> Appearance -> Customize -> Additional CSS?

    @media only screen and ( max-width: 650px ) {    
        body {
            overflow-x: hidden;
        }
    }

    If in case this doesn’t work, please connect your site to your WPMU DEV account and grant Support Access following the guides my colleague Dimitris shared in his last response so that we can go in and take a look into this.

    Hope this helps. Please let us know if this works for you. Thanks!

    Kind regards,
    Nahid

  • Emilia
    • WPMU DEV Initiate

    Thank you,

    First issue has been resolved.

    The second not. I am affraid that I cannot give a grant access to the http://www.petbox.pl because my clients last developer connected his site to the wpdev and I have no possibilities to connect it on my free account. I have to pay for subscription. If You give me a once a possibility to connect I ask my client if he wants to connect site to Your system.

    On iphone on chrome or safari problem still exist with moving screen to the left:

    once when You open site on iphone, screen goes left, then when on product page choose the options of wage.

    Please check. Maybe it is something not compatible in the theme?

  • Pawel
    • Staff

    Witaj, Emilia !

    Please try the following solution in CSS:

    @supports (-webkit-overflow-scrolling: touch) {
        body {
            margin-left: 27px;
            margin-right: -28px;
        }
    }

    It’s a CSS trick to target only iOS devices running on Safari. Only Safari implements -webkit-overflow-scrolling, so we can target it. The following lines with margins should move the body into correct position.

    Please try that, it seems to be working on my iPhone.

    Pozdrawiam,
    Paweł

  • Emilia
    • WPMU DEV Initiate

    Are you sure that is the correct code?

    When I paste it into Custom CSS tab there is and information that this code can broke my site.

    Can I paste there it safely?

    Another thing if You can check:

    On the featured products – for example on product page below product details
    https://prnt.sc/p8n4n9

    https://petbox.pl/sklep/calista-adult-cat/

    titles are not shortened on shop categories and subcategories. Can You help me with that? I shortened titles with code in functions.php

    I want to shortened title in featured products

    add_filter( ‘the_title’, ‘shorten_woo_product_title’, 10, 2 );
    function shorten_woo_product_title( $title, $id ) {
    if ( is_shop() && get_post_type( $id ) === ‘product’ ) {
    return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
    }

    else {
    return wp_trim_words( $title);
    }
    }

    add_filter( ‘the_title’, ‘shorten_woo_product_title_product_cat’, 10, 2 );
    function shorten_woo_product_title_product_cat( $title, $id ) {
    if ( is_product_category() ) {
    return wp_trim_words( $title, 4 ); // change last number to the number of WORDS you want
    }
    return $title;
    }

  • Dimitris
    • Support Star

    When I paste it into Custom CSS tab there is and information that this code can broke my site.
    Can I paste there it safely?

    Code seems to be fine, I also tested it in a site of mine. It should not cause any issues, as long as you insert it in a new line on the very bottom of your Custom CSS section.

    Another thing if You can check:

    As we are keen on having separate threads per member and per issue, could you please create a new thread about this or come find us in our Live Chat service? Thank you!
    https://premium.wpmudev.org/hub/support/#wpmud-chat-pre-survey-modal
    (Technical Support)

    Warm regards,
    Dimitris

  • Nahid
    • Tech Support

    Hey there Emilia !
    Hope you are doing well today!

    I’ve added the following CSS to your site and the issue seems to be fixed now:

    @media only screen and ( max-width: 650px ) {    
        body,
        nav {
            overflow-x: hidden;
        }
    }

    Could you please check and see if you still can replicate the issue on your end? Thanks!

    Hope this helps. We’ll be looking forward to hearing back from you. Thanks!

    Kind regards,
    Nahid

  • Nahid
    • Tech Support

    Hey there Emilia !
    Hope you are doing well today!

    I was able to replicate the issue. Could you please possibly try adding the following CSS code?

    .quantity .bootstrap-touchspin .input-group-btn-vertical>.btn {
        padding: 4px;
    }

    Hope this helps. Please let us know if this works for you. Thanks!

    Kind regards,
    Nahid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.