My table on product page is too big to fit on page on spark theme

[Ali-24]

Hi,

My table on product page is too big so I need to slide across to see it on desktop. I would really love to make the table slightly smaller so it all fits on the page or even slightly widen the text so it fits. Please help.

Thank you 

[Spac-es · Accepted solution]

I just added the following code to your theme.css file. This implementation ensures that the table is always visible on PC devices, eliminating the need for horizontal scrolling.

@media (min-width: 960px) and (max-width: 1072px) {
  .rte .rte__table-wrapper, .shopify-policy__body .rte__table-wrapper {
    overflow-x: initial;
  }
}

@media (min-width: 960px) and (max-width: 1132px) {
  .rte table, .shopify-policy__body table {
    font-size: 11px;
  }
}

Before:

After:

[Natasha-Saed]

Can you share your store URL to be able to provide you with the solution

[Ali-24]

Hi Natasha

Sure it is ajaecollection.com you need a password to enter ajae23

Thank you 

[Spac-es · Accepted solution]

I just added the following code to your theme.css file. This implementation ensures that the table is always visible on PC devices, eliminating the need for horizontal scrolling.

@media (min-width: 960px) and (max-width: 1072px) {
  .rte .rte__table-wrapper, .shopify-policy__body .rte__table-wrapper {
    overflow-x: initial;
  }
}

@media (min-width: 960px) and (max-width: 1132px) {
  .rte table, .shopify-policy__body table {
    font-size: 11px;
  }
}

Before:

After:

[Ali-24]

Hey, amazing Thanks so much. Is there a way for it to also work on Phone devices as it is still scrolling a bit there? Thank you

[Spac-es]

I tried coding implementations on mobile devices, but I ran into these errors:

• White space on the right side of the page:

• Size too small, hinders text legibility:

[Spac-es · Accepted solution]

After much pondering, I came up with a viable solution. I've added quite a bit of code to the document, but I think it was worth it. The key to the solution was adjusting the padding of the cells as the device dimensions decreased; this way, we achieved a pretty decent responsiveness. I hope you liked it!

@media (max-width: 320px) {
  .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th {
    padding: 9px;
  }
}

@media (max-width: 450px) {
  .rte .rte__table-wrapper, .shopify-policy__body .rte__table-wrapper {
    overflow-x: initial;
    font-size: 9.5px;
  }
}

@media (min-width: 321px) and (max-width: 360px) {
  .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th {
    padding: 12px;
  }
}

@media (min-width: 361px) and (max-width: 400px) {
  .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th {
    padding: 14px;
  }
}

@media (min-width: 401px) and (max-width: 425px) {
  .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th {
    padding: 18px;
  }
}

@media (min-width: 426px) and (max-width: 450px) {
  .rte table td, .rte table th, .shopify-policy__body table td, .shopify-policy__body table th {
    padding: 20px;
  }
}

 

[Ali-24]

So amazing Thanks so much!