Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 29, 2020 at 2:49 am #1233822
    DanielKG

    Hello Enfold support,

    Hope everyone is doing well.

    I have some issues with a couple of things where I would really appreciate your help. I have tried to figure out which classes to use, what to modify etc, etc, but nothing has worked so far. I have added a link to the images where you can see what I mean.

    Issue #1:
    MOBILE – When you go to a product in a mobile phone (this issue doesn’t show in the chrome developer/inspect browser in desktop) and go to the dropdown menu and select color or size (Image IMG_1.png) there is a zoom effect (Image IMG_2.png) and cuts the content of the page and stays like that (Image IMG_3.png). How can I get rid of that effect?

    Issue #2:
    MOBILE – There is a different space to the right and the left of the billing details (Image IMG_3.png)

    Issue #3:
    MOBILE – In the checkout page the look is very messy (Image IMG_5.png). I was able to do some testing with the element style but couldn’t figure out how to do it or what classes to change. On (IMG_5-Modified,jpg) you will be able to see what I would like to do. Align the boxes with the text above, decrease the size of card number, expire date, and card code (CVC) text to 12px to be able to fit them nicely.

    Issue #4:
    DESKTOP/TABLET/MOBILE – In the My account page the register button is outside the box and couldn’t figure it out how to fix it.

    I really appreciate your help on these issues. Thank you for looking into it.

    August 2, 2020 at 8:36 pm #1234669
    Mike

    Hey DanielKG,
    Sorry for the late reply and thanks for the links and images, I only have an Android to test with and the option reacts more like a popup than what you are seeing. Nonetheless I believe this is due to your viewport not having an maximum value. Currently I see your viewport is:
    <meta name="viewport" content="width=device-width, initial-scale=1"> I believe we should try this:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    I was not able to login to your site, so please try editing your theme’s header.php on line 65, look for:

    if( strpos($responsive, 'responsive') !== false ) { echo '<meta name="viewport" content="width=device-width, initial-scale=1">';  }

    and change to:

    if( strpos($responsive, 'responsive') !== false ) { echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">';  }

    Then clear your browser cache and check.

    Best regards,
    Mike

    August 3, 2020 at 3:34 pm #1234885
    DanielKG

    Hello Mike,
    Thanks for your response. I applied the changed suggested and it didn’t fix the issue. I put back the original header.php to avoid confusions as the solution didn’t work. Also I want to let you know that I haven’t modified any code of the theme. I fixed the login credentials.

    Thank you for looking into these issues.

    August 5, 2020 at 1:52 pm #1235416
    Mike

    Hi,
    Thanks for trying this, I have asked the team for someone to check your site with an iPhone, since I can not reproduce this with an Android. Thank you for your patience.

    Best regards,
    Mike

    August 7, 2020 at 4:48 am #1235906
    DanielKG

    Hello,
    Thanks for looking into these issues. After trying a bunch of things, I was able to fix the Issue #1 myself.

    Could you help me with the other issues (#2, #3, #4)? I really would like your help in those. Thank you.

    August 7, 2020 at 1:53 pm #1235994
    Mike

    Hi,
    For your issue #2 please try this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top .col2-set .col-1, .responsive #top .col2-set .col-2, .responsive .cart-collaterals .shipping_calculator {
    width: 100% !important;
}
}

    For #3, please try this css:

    @media only screen and (max-width: 430px) { 
#top.woocommerce-checkout label {
    font-size: 0.80em !important;
}
#top.woocommerce-checkout #wc-stripe-cc-form .form-row {
	padding-right: 0 !important;
	padding-left:  0 !important;
}
#top.woocommerce-checkout #wc-stripe-cc-form label[for=stripe-cvc-element] {
	    white-space: nowrap !important;
}
}

    After applying the css, please clear your browser cache and check.
    Expected results:
    2020-08-07_075052.png
    2020-08-07_064810.png

    Best regards,
    Mike

    August 8, 2020 at 12:31 am #1236153
    DanielKG

    Hi Mike,
    Thanks a lot!

    Issue #2 and #3 were solved. I really appreciate your help and how those were solved.
    The one left is Issue #4, do you have any ideas how to fix that one?

    August 8, 2020 at 3:26 pm #1236210
    Mike

    Hi,
    Glad to hear this helped, for #4 Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.woocommerce-account .woocommerce-form-register {
	overflow:hidden !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 10, 2020 at 4:25 pm #1236454
    DanielKG

    Hello Mike,

    As always THANK YOU very much for your help. That worked perfectly.
    It took me some time to respond because I was trying to fix two things myself but after trying a bunch of things I’m giving up, I couldn’t figure out what classes to target without damaging other areas.

    So in the same section that we just made the change, you will notice that the two columns have a light grey background, I believe the background shouldn’t be in the column but instead it should be the background color of the login and register form. I added two images to the same folder I have shared with you so you can see what I mean. Img_8 and Img_9 shows the light grey, and I changed the color (Img_9) so you can see it better. what I would like to do is to have that background color for the forms only and not the columns. Thank you.

    MOBILE: Also after fixing the issue #1, where I mentioned that I was having a zoom affect in the mobile browser, after research I found out that if the mobile browser thinks that your font is too small it will create that effect when selecting or typing information. So I was able to fix Issue #1 with:
    /*increase text size on drop down text – avoid apple to zoom text*/
    #top select {
    font-size: 16px;}

    Now in the store side, I couldn’t figure out what classes to target to increase the size in the input text of the apply coupon and on the fillable fields in the check out page information. Images Img_10 and Img_11 shows the sections. So what I would like to do is to increase the size of the input text fields in mobile so I don’t get that effect every time someone needs to type their information. Your help will be very appreciated. If we get this two things fixed that site will look perfect and the user experience will be great.

    If you have any questions do not hesitate to contact me.

    August 13, 2020 at 1:03 pm #1237401
    Mike

    Hi,
    Sorry for the late reply, and thanks for the screenshots. For the first issue please try this css:

    #top.woocommerce-account .main_color .col-1,
#top.woocommerce-account .main_color .col-2,
#top.woocommerce-account .main_color form.login,
#top.woocommerce-account .main_color form.register {
	    background-color: #B29DB6 !important;
}

    for the second one, thanks for sharing the logic & css behind the effect, so please try this css:

    #top.woocommerce-cart div td.actions .coupon .input-text,
#top.woocommerce-checkout div form .form-row input.input-text,
#top.woocommerce-checkout .main_color .input-text {
	font-size: 16px !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 13, 2020 at 4:19 pm #1237468
    DanielKG

    Hi Mike,
    Like always thanks for the support, the fix for the second Issue worked perfectly!!!
    The first one, I may have not explained my self correctly:
    So in “My account page”, you will notice that the two columns have a light grey background Img_8 (I added circles so you can see that the grey covers the whole columns individually, the image Img_9 was only as reference so you can see better the color background as the light grey can be hard to see but is there. I believe the background shouldn’t be in the column but instead it should be the background color of the login and register form only. I updated two images to the same folder I have shared with you so you can see what I mean. What I would like to do is to have that background color for the forms only (bordered area) and not the columns. Img_9 has now notes that I think explains better the issue and what I would like to achieve.

    Thank you again for the great support!

    August 15, 2020 at 11:59 pm #1238066
    Mike

    Hi,
    Sorry for the late reply, I see that I misunderstood your first request, and thanks for your screenshot because the gray is hard to see. :)
    So, to remove the gray from the background but leave it for the form, try this css:

    #top.woocommerce-account .main_color .col-1,
#top.woocommerce-account .main_color .col-2 {
	    background-color: #FFF !important;
}

    Best regards,
    Mike

    August 17, 2020 at 6:11 pm #1238584
    DanielKG

    Hello Mike,

    Thanks again, that worked perfectly.
    After reviewing the whole process in mobile I had two issues with the same zoom effect on mobile input text in some fields. One was in Calculate shipping before proceeding to checkout. I was able to fix that one with:
    @media only screen and (max-width: 479px) {
    .woocommerce-shipping-calculator .input-text {
    font-size: 16px !important;
    }
    }
    But I still have the zoom effect at the end of the checkout in the credit card payment input fields, please see image Img_10. I would need to increase the input text size to avoid the zoom effect. I couldn’t figure out what class to target after many tries.

    Thanks again for looking into this.

    August 20, 2020 at 12:54 pm #1239527
    Mike

    Hi,
    Sorry for the late reply and thanks for the screenshot, I checked your check out page and found that the input fields are actually “iframes” from the “stripe” domain. So in this case you can not control the element because it is not your domain.
    But the input fields already have the font size defined at 15px with this css:

    .ElementsApp, .ElementsApp .InputElement {
    color: #31325F;
    font-size: 15px;
}

    so I would think that this addresses the zoom effect for the element, but if not I found this article on styling the fields. You can try this css based on the information from the article:

    #stripe-card-element,
#stripe-exp-element,
#stripe-cvc-element {
	font-size: 16px !important;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 20, 2020 at 5:31 pm #1239595
    DanielKG

    Hi Mike,

    Thanks for all of your support during this process. I really appreciated, top notch Enfold support like always.
    The CSS provided didn’t work, but I was able to fix it using a filter from the article you shared.

    You can now close this ticket!

    Thanks again!

    August 20, 2020 at 10:25 pm #1239651
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Mobile WooCommerce issues’ is closed to new replies.