Change woocommerce appearance in diffrent small screen

  • Hai forum members,
    Wish all of you have a good day…

    WordPress version: 4.1.1
    Theme : AccessPress Ray
    Plugins : WooCommerce

    I want to make only one product display in a row for screen size 320px,
    and two product display in a row for screen 720px. I try to use @media screen (max-width) but nothing change.
    I also try to disable woocommerce-smallscreen.css using add_filter( ‘woocommerce_enqueue_styles’, ‘__return_empty_array’ ); in theme function.php file and add the class to the theme .css but cant get what I want. I try to check using google developer tool to find which .css file contain the class but it stat that the class is not in .css file, it’s in index file.

    The class I want to change is:
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {…}

    My question is:

    1. How to modify from woocommerce original file
    2. What is the diffrent between .css and .scss
    3. Is there anyway to disable .css only for certain element not the whole original woocommerce .css file

    That’s all is my question. And thank you.
    Sorry for bad english

  • The topic ‘Change woocommerce appearance in diffrent small screen’ is closed to new replies.