Support » Plugin: WPtouch - Make your WordPress Website Mobile-Friendly » Possible to disable elements on mobile view?

  • supervinnie40

    (@supervinnie40)


    I’ve installed this plugin, and quite happy with the result. However, I’ve got 1 problem. My contact form is in a table. This is so the small input fields are on the left and the big text field is on the right (with the “send” button on the bottom).

    Is there any way to upload a special CSS script that removes the <table> element? Or removes the make-up for the <table> element?

    I know WPTouch offers this option, but I don’t know the CSS code to achieve this.

    https://wordpress.org/plugins/wptouch/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter supervinnie40

    (@supervinnie40)

    Bump. 4 days and no reply?

    Hello,

    You can hide all tables on your site by adding the following to WPtouch’s Custom Code field:

    <style type="text/css">
        table { display: none; }
    </style>

    To make it more specific, you could see if there is an ID or class applied to the table and add those to the selector.

    E.g., if the table has id=”contact-table”, the code above would read

    table#contact-table { display: none }

    Thanks,

    Martin Kuplens-Ewart
    Product Manager, WPtouch

    Thread Starter supervinnie40

    (@supervinnie40)

    Thanks for the reply Martin!

    Downside of your solution is that it will actually remove the table and everything in it.

    My website uses a table to show 4 big icons for customers to choose from. When I visit my site via WPTouch, it doesn’t show the table at all. So the icons are also gone.
    With your custom code solution, everything between <table> and </table> is removed, also the icons inside the table.

    I’ve tried to change the table into a DIV before, but I couldn’t get it to work :(.

    My website: http://bit.ly/1GJmWtb

    Thread Starter supervinnie40

    (@supervinnie40)

    td.redigeren a .image {
      background-image: url('images/redigeren.png');
      background-repeat: no-repeat;
      height: 144px;
      width: 144px;
      margin-left: auto;
      margin-right: auto;
      opacity: 1;
      transition: opacity .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: opacity .25s ease-in-out;
      -ms-transition: opacity .25s ease-in-out;
      -o-transition: opacity .25s ease-in-out;
    }
    
    <td class="redigeren">
    <a href="/redigeren/">
    <div class="image"></div>
    </a>
    </td>

    This is the code.
    But when WPTouch is active, it gets changed into:

    td, th {
      display: table-cell;
      vertical-align: inherit;
    }
    
    <td class="redigeren">
    <a href="/redigeren/">
    <div class="image"></div>
    </a>
    </td>

    Missing a lot of CSS in WPTouch…. 🙁

    My second problem is that my contact form (contact form 7) is also inside a <table>. This is actually shown to big. Which means the menu button (and a few other buttons) don’t work anymore.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Possible to disable elements on mobile view?’ is closed to new replies.