• 

  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
  

  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
  

  Graham

  Participant

  April 17, 2018 at 10:51

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

  #191317 Copied
  

  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)