How can I fix my table CSS code for class 'custom-1'?

Store Design
1

Hi,

Please can someone assist me.

I’m trying to create CSS code for a table with the class “custom-1” to have th and td styling but my code is now working.

Here is the code:

.table .custom-1 .th {
  width: 50%;
}
.table .custom-1 .td {
  vertical-align: top;
}

Thanks!

2

Hi @guyv ,

Oh. Your CSS is completely wrong. Period before the name means you are calling the class. In your code you are trying to call the class table and a class th and td.

You can try this instead.

.custom-1 > th {
  width: 50%;
}
.custom-1 > td {
  vertical-align: top;
}
3

@made4Uo

Thanks for your help. Looks like I was way off haha.

I have added the following css:

.table-custom-1 > th {
  width: 50%;
}
.table-custom-1 > td {
  vertical-align: top;
}

and then applied it to a table using

but it’s not working.

Here is the link. The table is near the bottom of the page under the heading “WHAT’S IN THE BOX”

https://electricrideco.com/products/exway-atlas-carbon-2wd-43v-1-500w-2-electric-skateboard

Thanks.

4

Hello @guyv

  1. In your Shopify Admin go to online store => themes => actions => edit code

  2. Find Asset => theme.scss.css and paste this at the bottom of the file:

table.table-custom-1 th {
  width: 50%;
}
table.table-custom-1 td {
  vertical-align: top;
}

Please check the attached screenshot URL: https://prnt.sc/VGP3YN_0AXTA

Hope it will help you!

Thanks.

5

@bhavini

Perfect! Thanks.

6

@guyv
You’re Welcome :slightly_smiling_face: