• GoDaddy Community
  • GoDaddy Website Builders
  • GoDaddy Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 
    Go to solution
    SantaBroo
    Getting Started

    How to remove sliders at custom HTML and CSS

    Hello, so I added a custom HTML and CSS code. But there has suddenly appeared sliders left-right and up-down.

     

    SantaBroo_0-1610488498550.png

     

    If anyone can help on how to remove them I would really appreciate it.

    Here is the HTML and CSS code : "https://pastebin.com/Lx3JnCAK"

    1 ACCEPTED SOLUTION

    <style>
    .limiter {
      width: 100%;
      margin: 0 auto;
    }
    
    .container-table100 {
      width: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .wrap-table100 {
      width: 1170px;
    }
    
    table {
      border-spacing: 1;
      border-collapse: collapse;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      margin: 0 auto;
      position: relative;
    }
    table * {
      position: relative;
    }
    table td, table th {
      padding-left: 8px;
    }
    table thead tr {
      height: 60px;
      background: #36304a;
    }
    table tbody tr {
      height: 50px;
    }
    table tbody tr:last-child {
      border: 0;
    }
    table td, table th {
      text-align: left;
    }
    table td.l, table th.l {
      text-align: right;
    }
    table td.c, table th.c {
      text-align: center;
    }
    table td.r, table th.r {
      text-align: center;
    }
    
    
    .table100-head th{
      font-family: OpenSans-Regular;
      font-size: 18px;
      color: #fff;
      line-height: 1.2;
      font-weight: unset;
    }
    
    tbody tr:nth-child(even) {
      background-color: #f5f5f5;
    }
    
    tbody tr {
      font-family: OpenSans-Regular;
      font-size: 15px;
      color: #808080;
      line-height: 1.2;
      font-weight: unset;
    }
    
    tbody tr:hover {
      color: #555555;
      background-color: #f5f5f5;
      cursor: pointer;
    }
    
    .column1 {
      width: 260px;
      padding-left: 40px;
    }
    
    .column2 {
      width: 160px;
    }
    
    .column3 {
      width: 245px;
    }
    
    .column4 {
      width: 110px;
      text-align: right;
    }
    
    .column5 {
      width: 170px;
      text-align: right;
    }
    
    .column6 {
      width: 222px;
      text-align: right;
      padding-right: 62px;
    }
    @media screen and (max-width: 992px) {
      table {
        display: block;
      }
      table > *, table tr, table td, table th {
        display: block;
    		box-sizing: border-box;
      }
      table thead {
        display: none;
      }
      table tbody tr {
        height: auto;
        padding: 37px 0;
      }
      table tbody tr td {
        padding-left: 45% !important;
    		padding-right: 15px;
        margin-bottom: 24px;
      }
      table tbody tr td:last-child {
        margin-bottom: 0;
      }
      table tbody tr td:before {
        font-family: OpenSans-Regular;
        font-size: 14px;
        color: #999999;
        line-height: 1.2;
        font-weight: unset;
        position: absolute;
        width: 35%;
        left: 15px;
        top: 0;
      }
      table tbody tr td:nth-child(1):before {
        content: "Name:";
      }
      table tbody tr td:nth-child(2):before {
        content: "Release Date:";
      }
      table tbody tr td:nth-child(3):before {
        content: "Tags:";
      }
      table tbody tr td:nth-child(4):before {
        content: "Publisher:";
      }
      table tbody tr td:nth-child(5):before {
        content: "Cheap Buy:";
      }
      table tbody tr td:nth-child(6):before {
        content: "Gameplay:";
      }
    
      .column4,
      .column5,
      .column6 {
        text-align: left;
      }
    
      .column4,
      .column5,
      .column6,
      .column1,
      .column2,
      .column3 {
        width: 100%;
      }
    
      tbody tr {
        font-size: 14px;
      }
    }
    </style>

    View solution in original post

    5 REPLIES 5
    Nate
    Super User I

    You can remove padding from .container-table100 (line 19).

    SantaBroo
    Getting Started

    Yes but its still a problem when on mobile.

    This is how it looks on mobile - "https://prnt.sc/wm7cl6"

     

    Problem is that up-down slider is again there for no reason, as for the left-right slider it is working but I would rather that it isnt there. That it is like taking its normal space and if a word is too long that it just pases into row below (expands the current one). Like it is in desktop version.

    Pc version - "https://prnt.sc/wm78jk"

    This can also be removed (lines 191 thru 196).

     

     

     

     @Media(max-width: 576px) {
      .container-table100 {
        padding-left: 15px;
        padding-right: 15px;
      }
    }

     

     

    SantaBroo
    Getting Started

    Thanks, but currently its sits like this on long words:

    SantaBroo_0-1610529759555.png

     

    Where they just cut it.

    Is it possible to make like a padding for the right side and if a word hits the edge it just puts that word under, like :

     

    Age of Empires II: Definitive

    Edition

     

    And that adds the padding on that "Definitive" so it doesnt hit the edge of container

    <style>
    .limiter {
      width: 100%;
      margin: 0 auto;
    }
    
    .container-table100 {
      width: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .wrap-table100 {
      width: 1170px;
    }
    
    table {
      border-spacing: 1;
      border-collapse: collapse;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      width: 100%;
      margin: 0 auto;
      position: relative;
    }
    table * {
      position: relative;
    }
    table td, table th {
      padding-left: 8px;
    }
    table thead tr {
      height: 60px;
      background: #36304a;
    }
    table tbody tr {
      height: 50px;
    }
    table tbody tr:last-child {
      border: 0;
    }
    table td, table th {
      text-align: left;
    }
    table td.l, table th.l {
      text-align: right;
    }
    table td.c, table th.c {
      text-align: center;
    }
    table td.r, table th.r {
      text-align: center;
    }
    
    
    .table100-head th{
      font-family: OpenSans-Regular;
      font-size: 18px;
      color: #fff;
      line-height: 1.2;
      font-weight: unset;
    }
    
    tbody tr:nth-child(even) {
      background-color: #f5f5f5;
    }
    
    tbody tr {
      font-family: OpenSans-Regular;
      font-size: 15px;
      color: #808080;
      line-height: 1.2;
      font-weight: unset;
    }
    
    tbody tr:hover {
      color: #555555;
      background-color: #f5f5f5;
      cursor: pointer;
    }
    
    .column1 {
      width: 260px;
      padding-left: 40px;
    }
    
    .column2 {
      width: 160px;
    }
    
    .column3 {
      width: 245px;
    }
    
    .column4 {
      width: 110px;
      text-align: right;
    }
    
    .column5 {
      width: 170px;
      text-align: right;
    }
    
    .column6 {
      width: 222px;
      text-align: right;
      padding-right: 62px;
    }
    @media screen and (max-width: 992px) {
      table {
        display: block;
      }
      table > *, table tr, table td, table th {
        display: block;
    		box-sizing: border-box;
      }
      table thead {
        display: none;
      }
      table tbody tr {
        height: auto;
        padding: 37px 0;
      }
      table tbody tr td {
        padding-left: 45% !important;
    		padding-right: 15px;
        margin-bottom: 24px;
      }
      table tbody tr td:last-child {
        margin-bottom: 0;
      }
      table tbody tr td:before {
        font-family: OpenSans-Regular;
        font-size: 14px;
        color: #999999;
        line-height: 1.2;
        font-weight: unset;
        position: absolute;
        width: 35%;
        left: 15px;
        top: 0;
      }
      table tbody tr td:nth-child(1):before {
        content: "Name:";
      }
      table tbody tr td:nth-child(2):before {
        content: "Release Date:";
      }
      table tbody tr td:nth-child(3):before {
        content: "Tags:";
      }
      table tbody tr td:nth-child(4):before {
        content: "Publisher:";
      }
      table tbody tr td:nth-child(5):before {
        content: "Cheap Buy:";
      }
      table tbody tr td:nth-child(6):before {
        content: "Gameplay:";
      }
    
      .column4,
      .column5,
      .column6 {
        text-align: left;
      }
    
      .column4,
      .column5,
      .column6,
      .column1,
      .column2,
      .column3 {
        width: 100%;
      }
    
      tbody tr {
        font-size: 14px;
      }
    }
    </style>

    View solution in original post