Can't get responsive to work as expected.

code below.

I have tried various methods to obtain the following.

on desktop show all the columns
On smaller devices show the first 3 columns and the + button to show the modal popup.

With this setting I get a reasonable layout the first time I run it in a desktop browser.
On mobile It works as expected.
On desktop when I hit the refresh button. (Which is the same code below + calling the Ajax ) the layout goes weird.
ie the 2nd column fills the page nearly.

What is the correct settings:

Do I set the width of the columns to px / % / leave them and set autowidth: true.

Cheers

Steve Warby

tableDataChanged =  $('#dtDataChanged').DataTable( {
              //scrollY : 800,
              //deferRender : true,
              //scroller : true,
            responsive: {
                details: {
                renderer: $.fn.dataTable.Responsive.renderer.tableAll(),
                display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for Deal No:  '+data.quoteID;
                }
            } )
        }
    },

 pagingType: "simple",
        lengthChange : false,
        order: [[0, 'desc']],
        dom: "Bfrtip",
        //dom: '<"top"i>rt<"bottom"flp><"clear">',

        //autoWidth : true,
        data : dataChanged,

        buttons: [
        {
            text: "Refresh",
            action: function (e, dt, node, config) {
                getQuoteDetails();
                //table.column(3).search(null).draw();
            }
        }

        ],

              columns: [

            { data: "quoteID" , responsivePriority: 1 ,title : "Deal No" , width : '10px' },
            { data : null,  responsivePriority: 1 ,width : '10px' , title : 'Email details' , width : '10px' ,class : 'form-control' ,'defaultContent': '<button style="  color : black ">Email Deal </button> '},
            {
            data: "web_path",
            title : ' Info 1 ',
            width : '150px',
            responsivePriority: 1,
            render: function(data, type, row)
              {

                  //console.log(' web_path1 = '+ data );
            if (data !== undefined ){
                //console.log('data web_path1 = ' + data);
                 var ext = data.substr(data.lastIndexOf('.') + 1);
                    if ( (ext === 'jpeg' ) || ( ext === 'jpg' ) || ( ext === 'JPG' ) || ( ext === 'jp2' ) || ( ext === 'png' )|| ( ext === 'gif' ) || ( ext === 'pdf' ))
                        {
                           // return '<img src=" ' + data + ' "' + imageSize + ' " style="margin: 5" class="info1">';
                            return '<img src=" ' + data + ' "' + imageSize + ' class="info1">';

                        }
 // now check if it is a video
                 if ( (ext === 'mp4')|| ( ext === 'MOV' ))
                    {
                          return ' <video width="320" height="240" controls>  <source src=" ' +data + ' " type="video/mp4">  <source src="movie.ogg" type="video/ogg">  Your browser does not support the video tag.   </video>'
                     }
 // last here so must be download
                    {
                          var fullPath = data.split('.')[0];
                          var filename = fullPath.replace(/^.*[\\\/]/, '');
                          return ' Click to Download <br/> <a href=" '+ data + ' " target="_blank"  > '+ data +  " </a> ";
                }
             }   else { return '' };
                            }

          } ,
            { data: "quoteTitle" , responsivePriority: 2 , title : "Title" , width : '150px'},
            {data: "notes",
            responsivePriority: 3,
            title : "Details",
            //width : '60%',
            render: function ( data, type, row ) {
            return  "<div class='setRowHeight' "  + data + " </div>";
            }
            },


                      ]