0

I have a virtual product which is showing music sample files for user to listen and then select from them. "https://myproductvideo.com/product/video-with-voice" It is the link of product. This is a wordpress website and i need to work with html as product description only takes html. In mobile view i showed music samples within a table in two rows. But viewing in mobile width of each row is large enough. I want to decrease the width of row to fit in mobile screen. I have tried everything but get nothing. Please see the code 

    <style>
.clsDes { visibility:visible; } .clsmob { visibility:collapse; } @media screen and (max-width: 768px) { .clsDes { visibility:collapse; } .clsmob { visibility:visible; } }


    <div class="clsmob">
    <table style="width:10px;">
    <tbody>
    <tr>
    <th>Female Voice Samples</th>
    </tr>
    <tr>
    <td>[playlist artists="false" images="false" 
    ids="810,811,812,813,814,815,816,817,818,819"]</td>
    </tr>
    <tr>
    <th>Male Voice Samples</th>
    </tr>
    <tr>
    <td>[playlist artists="false" images="false" 
    ids="821,822,823,824,825,191,192,193,194,195"]</td>
    </tr>
    </tbody>
    </table>
    </div>

    <div class="clsDes" >
    <table >
    <col width="50">
    <col width="50">
    <tr>
    <th>Female Voice Samples</th>
    <th>Male Voice Samples</th>
    </tr>
    <tr>
    <td >[playlist artists="false" images="false" 
    ids="810,811,812,813,814,815,816,817,818,819"]</td>
    <td >[playlist artists="false" images="false" 
    ids="821,822,823,824,825,191,192,193,194,195"]</td>
    </tr>
    </table>
    </div>
Tehreem Shahbaz
  • 3
  • 1
  • 2
  • I think what would help is that you give the table width in percentage and not in Pixel. I think this should help. And also give your divs the width in percentage. – Doggo Nov 22 '17 at 10:14
  • Sorry this is not working. I have given width of table and div in percentage but no working. – Tehreem Shahbaz Nov 22 '17 at 10:30
  • Or you change visibility:collapse; to visibility:none; unless you want it like this and did this with purpose. Because these two are diffrent. Read more here: https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone – Doggo Nov 22 '17 at 10:36
  • After changing collapse to none....an excessive white space has been vanished. It also changed the width rows a little bit. But not exactly as i wanted. – Tehreem Shahbaz Nov 22 '17 at 11:02
  • Please Try adding this in your CSS: `* { margin:0px; padding:0px; } ` – Doggo Nov 22 '17 at 12:10
  • Where in CSS i should add this code? – Tehreem Shahbaz Nov 22 '17 at 12:26
  • You should add this on to the top. – Doggo Nov 22 '17 at 12:26

2 Answers2

0

I found this -

Set Display none in Mobile view for clsDes

@media screen and (max-width: 768px) { .clsDes { visibility:collapse; } 
 .clsmob { visibility:visible; } }

to 

@media screen and (max-width: 768px) { .clsDes { display:none; } .clsmob { 
 visibility:visible; } }

This code works perfect for the code you shared.. but your problem is different . i went to check your website you need to set custom css for players. width of voice player is dynamically generating. fix there width in css using !important.

For Example:

@media screen and (max-width: 768px) { .wp-playlist wp-audio-playlist wp-
playlist-light{max-width:250px !important}}

Try This one

Rohit Gautam
  • 312
  • 2
  • 17
0

I tried this and it worked.

    @media screen and (max-width: 768px) {
    .clsDes { display:none; } 
    .clsmob { visibility:visible;} 
    .wp-playlist {max-width:310px !important; padding: 0px !important; margin: 0px !important;}
    }
Tehreem Shahbaz
  • 3
  • 1
  • 2