Home > UI/UX Development > CSS > Make Document Library Webpart Responsive in SharePoint 2013

Make Document Library Webpart Responsive in SharePoint 2013

Ranjit Pokale CSS, Sharepoint 1

Hello everyone, in this post we discuss on how to make document library web part responsive in SharePoint.

Steps to make Responsive document library web part

  • First, we need to create a document library and add some sample documents including folder.
  • To display document library, here we create web part page and add document library list.
  • Now edit page in SharePoint designer and add the following CSS to the page.

    Responsive Document Library
    CSS
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    /**Hide ribbons and menus from page**/
    #titleAreaBox,
    #sideNavBox {
      display: none;
    }
    #s4-titlerow {
    height:0;
    padding:0;
    margin:0;
    }
    /**Hide ribbons and menus from page**/
     
    #contentBox {
      padding: 0!important;
      margin: 0 auto!important;
      min-width: auto!important;
      width:98%;
    }
     
    #s4-bodyContainer {
      padding: 0;
    }
     
    html,body,h1,h2,h3 {
      margin: 0;
      padding: 0;
      border: 0;
      vertical-align: baseline;
      font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
    }
     
    /*Documents library Web Part */
    .ms-webpartPage-root {
        border-spacing: 0px;
        padding: 10px;
        border: 2px solid gray;
        overflow:hidden;
    }
    .ms-webpartPage-root .ms-webpart-titleText {
        text-transform: uppercase;
        color: #356eb7;
        font-weight: 700;
        padding: 0 0 12px 0px;
        font-size: 18px;
    }
    .ms-webpartPage-root .ms-vh2 a,
    .ms-webpartPage-root .ms-vh a{
    word-wrap: normal;
        word-break: normal;
        white-space: normal;
        font-weight: 700;
        font-size:15px;
        color: #444;
    }
    /**Document Style - Default START*/
    .ms-webpartPage-root .ms-noWrap,
    .ms-webpartPage-root .ms-vb a.ms-listlink,
    .ms-webpartPage-root .ms-vb2 a.ms-listlink
    {
        word-wrap: normal;
        word-break: normal;
        white-space: normal;
        font-weight: 500;
        font-size:14px;
        color: #444;
     
    }
    .ms-webpartPage-root .ms-core-form-heading {
    color: #444;
    }
    /**Document Style - Default END*/
     
    /**Document Style - Basic Table START*/
    .ms-basictable .ms-vb a,
    .ms-basictable .ms-vb2{
        word-wrap: normal;
        word-break: normal;
        white-space: normal;
        font-weight: 500;
        font-size:14px;
        color: #444;
    }
    /**Document Style - Basic Table END*/
     
    /**Document Style - Document Details START*/
    table.ms-listviewtable > tbody > tr > td.ms-stylebox,
    table.ms-listviewtable > tbody > tr > td.ms-stylebox a,
    .ms-alternatingstrong .ms-vb a:link,
    .ms-alternatingstrong .ms-vb-user a:link,
    .ms-vb.itx a,
    .ms-vb2 {
        font-size: 14px;
        color: #444;
        font-weight: 500;
    }
    /**Document Style - Document Details END*/
    @media (min-width: 768px) and (max-width: 991px) {
    .ms-webpartPage-root .ms-fullWidth .ms-listviewtable .ms-vb-user span.ms-noWrap {
    white-space:normal!important;
    }
    }
     
    @media (min-width : 320px) and (max-width : 640px) {
    .ms-webpartPage-root .ms-fullWidth .ms-listviewtable tr th:nth-last-child(1),
    .ms-webpartPage-root .ms-fullWidth .ms-listviewtable tr td:nth-last-child(1),
    .ms-webpartPage-root .ms-fullWidth .ms-listviewtable tr th:nth-child(6),
    .ms-webpartPage-root .ms-fullWidth .ms-listviewtable tr td:nth-child(6)
    {
    display:none;
    }
    }
    @media (min-width : 320px) and (max-width : 479px) {
    .ms-listview-qcbContainer ul.ms-qcb-leftzone li:last-child{
    display:none;
    }
    .ms-webpartPage-root .ms-qcb-leftzone {
             margin-left: 0;
    }
    .ms-webpartPage-root .ms-qcb-button {
        font-size: 12px;
        color: #444;
        font-weight: 500;
        padding:3px;
    }
    .ms-webpartPage-root .ms-listview-sync-glyph {
        font-size: 18px;
    }
    .ms-webpartPage-root .ms-listview-new-glyph {
             font-size: 13px;
    }
     
    .ms-webpartPage-root div.ms-dragDropAttract-subtle {
             min-width: 0;
    }
    /** Style Type : Basic Table **/
    .ms-webpartPage-root {
        border-spacing: 0px;
        padding: 2px;
        border: 2px solid gray;
    }
    .ms-basictable .ms-vhltr,
    .ms-basictable .ms-vb-icon,
    .ms-basictable .ms-vb-title,
    .ms-basictable .ms-vb2,
    .ms-basictable .ms-vb-title .ms-vb,
    .ms-basictable .ms-vh2 {
         padding: 2px;
    }
    .ms-basictable .ms-vb-user {
        padding-top: 2px;
        padding-right: 2px;
        padding-left: 6px;
    }
    .ms-basictable td.ms-addnew {
        padding-left: 2px;
        padding-right: 4px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    }

    Refresh the page to see the changes.
    * Document library web part in desktop screen
    * Document library web part in mobile screen

This Article is TAGGED in , , , , . BOOKMARK THE permalink.

Avatar photo
Ranjit Pokale

Related articles

Publish SharePoint Hosted Add-ins

Hello everyone, in this post we will discuss about way to publish

How to check which SharePoint site template is used to build the site

Hello folks, I recently need to check which site type or site template

How to give item level permission through SharePoint workflow?

Sometimes we need to give item level permission for the submitted items

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">