Solved

Table Formatting - Reduction of row height - Dawn Theme

CNOS
Tourist
10 0 3

Hi,

Could somebody help me and explain where exactly I need to modify the code to reduce the row height in the tables that are on the product page within the Dawn theme? (I had a similar issue with the Debut theme before and managed to fix it but no chance this time…)

Here is an example from my shop: https://getabottle.de/products/aberfeldy-18-jahre-2021-exceptional-cask-series-double-cask-limited-e...

Part of my product description is a table with additional information. The issue is that there is so much empty space in each cell on the top and bottom and I would like to have the different rows of the table to be as close together as possible to use less vertical space on my page. 

Thank you very much in advance.

Accepted Solution (1)
Nick_Marketing
Shopify Partner
1487 336 464

This is an accepted solution.

You could try to add this code instead

 

table:not([class]) td, table:not([class]) th {
  padding-top: 0;
  padding-bottom: 0;
}


.rte table p {
  margin: 0;
}

 

2021-09-22 16_53_07.png

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).

View solution in original post

Replies 7 (7)

Nick_Marketing
Shopify Partner
1487 336 464

Hi!

Try adding this code to the bottom of the base.css

.rte table td{
  line-height: 0.8;
  padding-top: 1px;
  padding-bottom: 1px;
}
Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
CNOS
Tourist
10 0 3

Thank you for the prompt reply.

For the line height, I had to move it back to 1, as otherwise the text that goes over two lines looks squeezed.

And my main issue is the space highlighted in red. I want to eliminate that particular space. With the code suggestion provided, it only marginally decreased the gaps unfortunately. Maybe there is another solution?

EEA93C6F-17D7-4172-8744-5933C0CFFF90.jpeg

Nick_Marketing
Shopify Partner
1487 336 464

This is an accepted solution.

You could try to add this code instead

 

table:not([class]) td, table:not([class]) th {
  padding-top: 0;
  padding-bottom: 0;
}


.rte table p {
  margin: 0;
}

 

2021-09-22 16_53_07.png

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
CNOS
Tourist
10 0 3

Fantastic! Double thumbs up! That solved the problem and is exactly the solution I was looking for.

Thank you very much.

Nick_Marketing
Shopify Partner
1487 336 464

Excellent, I'm glad the issue is solved!

Nick | Ecommerce & Marketing Technology Consultant | Toronto, CANADA
- For consulting work availability, please send me a Private Message or submit a ✍️Contact Form.
- For FREE Shopify Tutorials, Subscribe to my YouTube channel (▶️ Ecommerce TV).
Habbi
Visitor
1 0 0

I have the same question. Where do you paste this code into?

Aluna1
Visitor
1 0 1

Hi! I have the exact same issue, but I have tried to copy the code but it just stays as plain text... Where exactly should I paste the code? (Sorry, I'm new to "coding" 🙂