Brooklyn Theme Price table resizing on mobile size/ overriding Shopify .css

itsolidude12
Pathfinder
128 4 40

Hey guys,

I made a quick table to shop shipping prices etc. (Made a new page and just click the show editor button)

Now, It looks like some shopify .css is overriding my .css and I can not for the life of me find what is overriding it, even after using google dev tools.

I would like for all the green borderlines to disappear except the one below the very first row.

And the second problem is for the mobile size. At 600px it just breaks and the green lines go everywhere. At this point I'd just like them to be disabled at phone size. I tried a lot of things, I hope you can help me. (I am using the Brooklyn Playful Theme).

tablenormal.PNGtable phone.PNG

 

<style type="text/css"><!--
body {
  line-height: 1.25;
}

table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}

.details{
  
}

.firstRowLine td{
  border-top: 0px solid black;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  background-color: #f8f8f8;
  padding: .35em;
}

table th,
table td {
  padding: .625em;
  text-align: center;
}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 600px) {
  table {
    border: 0px;
    color: #ffffff;
  }

@media screen and (max-width: 600px) {
  th,td {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}
--></style>
<table>
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Timeframes<br>(Business Days)</th>
<th scope="col">$ (USD)</th>
<th scope="col">Details</th>
</tr>
</thead>
<tbody>
<tr class="firstRowLine">
<td data-label="Country">United States</td>
<td data-label="Shipping Time">7 to 15</td>
<td data-label="Cost">Free</td>
<td data-label="Details" class="details">*We do not ship to Hawaii &amp; Alaska</td>
</tr>
</tbody>
</table>

 

Replies 0 (0)