is it wrong to use "min-Width:105%" & "max-Width:105%" to expand my list views on small sized screens

Question

I'm working on a Team site inside SharePoint 2013, and I've defined many issue tracking lists. and for all these lists I'm showing the Description field (which is of type Enhanced Rich Text) inside the list views . now some users whom are accessing the team site from relatively small-sized squared screens (not wide screens) , as facing a problem is that the list views became very crowded, and as a result the Description field will only show one word per line , and will expand vertically all the way as follow:-

so I try many approaches , and one of them worked , where I defined the following inside my custom CSS file:-

#WebPartWPQ2  {
    min-Width:105%;
    max-Width:105%;
}

after defining this css rule, the list views will show a horizontal tool bar and the description field will relax and show more words per line as follow:

but note sure if doing so is a recommended approach to follow? now even on wide screens I will get a horizontal tool bar since the list will always occupy 105% of the screen. So can anyone advice on this please ?

Answer 1

Add Script Editor to the page containing JavaScript or CSS that will adjust the width of the column according to the width of the browser window.

JQuery

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.width() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

CSS

#WebPartWPQ2
{
    /* default styles applied first */
}

@media screen and (min-width: 820px) /* width >= 820 px */
{
    #WebPartWPQ2 {
        min-width:105%;
        max-width:105%;
    }
}

@media screen and (min-width: 1280px) /* width >= 1280 px */
{
    #WebPartWPQ2 {
        min-width:100%;
        max-width:100%;
    }
}