changes in comment area not appear on mobile

• 

  moshekahol · Member · Oct 9, 2016 at 2:11 pm

  • Copy link
  • Add topic to favorites

  Hi I used the code (posted in the end of the question ) to remove the url request in comments, change the frey background wo white and hide the “required” labels…
  when I view it in my computer in the css editor, it seems that that the changes affect all screens… but in reality when I open my site in my mobile and go to comment on some post all the changes are gone… why is that?

  `/* comment area remove grey */
  #comments #respond #comment-form-comment, #comments #comment-form-share-text-padder, #comments #respond .comment-form-fields div.comment-form-input {
  background: none !important;
  border: 1px solid black;
  }

  /* comment area hide your site and text and labels*/
  .comment-form-field.comment-form-url {
  display: none;
  }

  label span {
  display: none !important;
  }`

  thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Oct 10, 2016 at 3:38 pm

  • Copy link

  Hi there,

  You’re right that you’ll need to add some extra custom CSS to specifically target mobile. The following should work to change the background and border colour of the form’s field, as well as hide the URL field, on mobile devices:

  #comments textarea, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
      background: #fff;
      border: 1px solid black;
  }
  
  .comment-form-url {
      display: none;
  }

  Can you add the above to the CSS panel of the WordPress.com Customizer and let me know if it works out for you?

  Thanks!