Return to previous page

How to hide specific Element (Row) on mobile vision? Please help

This topic has 4 replies, 2 voices, and was last updated 6 years ago ago by Rose Tyler

  • Avatar: Graham
    Graham
    Participant
    April 17, 2018 at 03:38

    Hi there,

    I was going to create a size chart for Woocommerce product, however, it appears to be too large for mobile display, so I was just thinking I could make a large size on desktop and another small table for mobile display.

    *Problem: CSS to hide the specific element(row) on mobile or display on desktop only.

    I have searched on Google but found most of the articles are outdated.
    Could you pls give me a tutorial on how to properly modify the CSS codes?
    Much appreciated!

    Regards
    Graham

    #191280 Copied Theme version: LATEST WooCommerce version: Latest Version
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 17, 2018 at 09:11

    Hello,

    If elements were create using VC, you can use Responsive Options http://prntscr.com/j6b3hl
    also, code like,

    .class-of-element {
   display: none;
}

    can be added in Theme Options > Styling > Custom css > Custom css for mobile or desctop. Use devtools in chrome browser to find required class.
    Let us know if you need any further assistance.

    Regards

    #191300 Copied
    Avatar: Graham
    Graham
    Participant
    April 17, 2018 at 10:51

    Thank you!
    The content now is hiding now on the mobile phone.
    Cheers

    #191317 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 17, 2018 at 10:56

    You’re welcome!

    Regards

    #191318 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Application – WooCommerce Theme
lazy-placeholder
Electronic Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Hosting Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Marseille 01 – WordPress WooCommerce Theme
lazy-placeholder
Phone Service – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion 03 Store – WordPress WooCommerce Theme
lazy-placeholder
Coffee Store – WooCommerce Theme
lazy-placeholder
Bags Store – WooCommerce Theme
lazy-placeholder
Watches Store – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.