[Resolved] woo product mobile style css

Home Forums Support [Resolved] woo product mobile style css

Home Forums Support woo product mobile style css

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #683518
    chete

    Hi.

    I installed woo. I added css to give style to the product card. But I just saw that on mobile does not look right.
    What size should I add for the mobile version to use another css style ?
    I added @media (max-width: 768px) { …..
    but I’m not done getting it.

    Regards

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #683627
    David
    Staff
    Customer Support

    Hi there,

    thats the correct size for mobile styling:

    @media (max-width: 768px) {
        /* CSS in here for mobile only */
    }
    #683632
    chete

    Hi David

    ok, thank you for confirming it.
    I added in custom css:

    
    .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
        float: right;
        width: 38%;
        clear: none;
    }
    
    .woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
        float: left;
        width: 58%;
    }

    to give it a concrete style. But I saw that on a mobile phone it went wrong.

    @media (max-width: 768px) {
       .woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
        width: 100%;
    } 
    	
    	.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
        width: 100%;
    }
    }

    but the summary zone is not displayed correctly.

    what can be what’s wrong?

    Regards

    #683639
    David
    Staff
    Customer Support

    Add this to the summary rule:

    box-sizing: border-box;

    #684227
    chete

    Hi David

    Thank you very much, it works perfectly.

    Regards !

    #684229
    David
    Staff
    Customer Support

    You’re welcome, glad to be of help

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.