Home Forums Arnold WordPress Theme Mobile page styling issues

This topic contains 19 replies, has 3 voices, and was last updated by  BWSM 2 months ago.

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #15831

    cincin
    Participant

    Hi, could you please help me with these two mobile styling issues?

    1. (see pic link below) The checkout page product titles (product, quantity, total) are too close, and the “enter promotion code” blank bottom line is collapsed with “apply coupon” button, could you please fix this?

    https://drive.google.com/file/d/15s-qD4PBWi3FHbJ9ow3MGCUO2SoK1FrO/view?usp=sharing

    2. (see pic link below) when completing any forms/tables on the site, if there’s information previously filled in and recorded by the site, the blank will be highlighted in yellow, could you disable this?

    https://drive.google.com/file/d/14RQpsAjZpaGozZ9TtIuFQiKpnCWodQll/view?usp=sharing

    thank you!

    #15842

    BWSM
    Keymaster

    Hi,

    Please paste the custom css code to “Appearance > Customize : Additional CSS”

    @media(max-width: 480px) {
    .woocommerce table.shop_table td.product-name > a {width: 90%; display: block;}
    .woocommerce-page.woocommerce-cart button.button.apply-coupon {margin-top: 20px;}
    }

    I checked on mobile late for the 2nd question.

    Regards

    • This reply was modified 3 months ago by  BWSM.
    #15846

    BWSM
    Keymaster

    I checked on iPhone, there is not yellow on input. What’s your ios version?

    #15847

    cincin
    Participant

    ios 11.4.1 but this issues exists not only on mobile but also on desktop.

    The yellow part shows when the information that I intend to enter was already previously recorded. (eg. i want to log in with my email, and I have logged in before with the same email, so when I am typing the first letter of my email, there’s suggestion on that email and after I select that email, this column will be yellow.

    this issue exists not only on mobile but also desktop.

    thank you.

    #15849

    cincin
    Participant

    hi,

    the suggested code has various errors according to the customizer ;

    $media(max-width: 480px) {
    .woocommerce table.shop_table td.product-name > a {width: 90%; display: block;}
    .woocommerce-page.woocommerce-cart button.button.apply-coupon {margin-top: 20px;}
    }

    please see below the pic links to see the errors:

    https://drive.google.com/file/d/1Ej5vvNPDLhUo2nst_bkkolaE20DXqLsa/view?usp=sharing
    https://drive.google.com/file/d/1d12TPG_5J82LJSosmXe1j4jqLTPw33bc/view?usp=sharing

    thank you

    #15864

    BWSM
    Keymaster

    I will checked based on your info, thanks!

    For the CSS error:

    Please paste again:

    @media(max-width: 480px) {
    .woocommerce table.shop_table td.product-name a {width: 90%; display: block;}
    .woocommerce-page.woocommerce-cart button.button.apply-coupon {margin-top: 20px;}
    }

    ——————————–
    If it doesn’t work, please send your question and wp-admin(url/user/pass) to uiueux@gmail.com, I’ll log in to check it.

    #15866

    cincin
    Participant

    Hi, the problem is still there please see pic below:

    https://drive.google.com/file/d/1z5mFRF_igNrrL1sE6fKMB7osWrCn7x1V/view?usp=sharing

    i will send admin info to your email, thank you!

    #15868

    BWSM
    Keymaster

    Please try to add the CSS to remove the yellow BG on input:
    input:-webkit-autofill background-color: rgba(250, 255, 189,0) !important;

    #15877

    cincin
    Participant

    Hi, the issue 2 was solved, but the issue 1 is still there, kindly see the parts highlighted in light gray in the pic.

    mobile

    #15878

    cincin
    Participant
    #15882

    BWSM
    Keymaster

    Please use the CSS:

    
    .woocommerce #content .quantity input.qty, .woocommerce .quantity input.qty, .woocommerce-page #content .quantity input.qty, .woocommerce-page .quantity input.qty {
        padding-right: 10px;
    }
    @media(max-width: 480px) {
    .shop_table .thead {font-size: 16px;}
    .shop_table .tbody {font-size: 14px;}
    .shop_table .quantity input.qty{margin-left: 5px;}
    }
    
    #15885

    cincin
    Participant

    hi,

    i added the code, but the problem is still there:

    https://drive.google.com/file/d/1kyY3_XCQDGKMak8GKuhTdCPPEKGW17I-/view?usp=sharing

    #15886

    BWSM
    Keymaster

    Please update the CSS as:

    
    .woocommerce #content .quantity input.qty, .woocommerce .quantity input.qty, .woocommerce-page #content .quantity input.qty, .woocommerce-page .quantity input.qty {
        padding-right: 10px;
    }
    @media(max-width: 480px) {
    .woocommerce.woocommerce-cart table.shop_table, .woocommerce-page.woocommerce-cart table.shop_table {
        font-size: 12px!important; }
    .woocommerce-page.woocommerce-cart table.shop_table thead {font-size: 14px!important; }
    .shop_table .quantity input.qty{margin-left: 5px;}
    }
    • This reply was modified 3 months ago by  BWSM.
    #15888

    BWSM
    Keymaster
    This reply has been marked as private.
    #15910

    cincin
    Participant

    hi, thank you it works great now! may i know further how to change the mobile menu font styling? i need to change font size, thank you!

    #15911

    BWSM
    Keymaster

    Please change CSS:

    For menu item in expanded panel:

    @media(max-width: 480px) {
    #navi a { 
        font-size: 12px; }
    }

    For menu icon in header:

    @media(max-width: 480px) {
    .navi-trigger-text { 
        font-size: 12px; }
    }
    #16101

    cincin
    Participant

    hi, the code doesn’t work, could you kindly look into it again? thank you!

    #16106

    BWSM
    Keymaster

    Hi,

    Did you put the css into “Appearance > Customize : Additional CSS”?

    #16121

    processstudios
    Participant

    I’m having trouble changing the size of the header on mobile. ideally, I’d like to increase the padding above the text logo. Can this be done? Header height – either as a number or as px doesn’t seem to be changing. Many thanks…

    #16124

    BWSM
    Keymaster

    Hi processstudios

    Please go to Appearance > Theme Options > Mobile: Header Height on Mobile
    Enter a number without “px”

    ps: please open a new ticket if you have new question.

    Regards!

Viewing 20 posts - 1 through 20 (of 20 total)

You must be logged in to reply to this topic.