Hello everyone,
I need to change the size of the table on my product page description as it is too wide and I need to scroll to see the suit here is a link to my product page
https://starnny.com/collections/jackets/products/khaki-plaid-removable-hood-buttoned-shacket
Thank you!
Hello @rafaymed
I tried accessing your site but it auto redirects to Google. Are you testing something?
Hello, I have read your problem and I have a solution to solve your problem.
After you make edits as instructed, you will receive a new interface as follows:
Follow these steps:
Step 1: Select the online store and select edit code:
Step 2: In the code editing interface, search for the file: theme.scss.css
Step 3: Open the file, scroll to the bottom of the file and add the following code:
.product-single__description table tr td {
border: none;
position: relative;
padding: 5px 3px !important;
text-align: center !important;
}
Step 4: Save the file changes and test the new look of your row.
Hope it helps @rafaymed !
sorry this happened because I forgot to deactivate the geo&vpn blocker in my store thank you for your interest in helping me appreciate it.
Your code worked for me and adjusted the table size as I wanted, thank you so much for your time.
Hello, I’m sending you a new code to replace the old code I sent before:
.product-single__description table tr td {
border: none;
position: relative;
padding: 5px 3px !important;
text-align: center !important;
font-size: 0.8em;
}
.product-single__description table {
width: 280px !important;
}
However, resizing the table to work well on mobile without scrolling only works well to a certain extent. Therefore, if you want to remove the scroll effect completely, I recommend converting the table to an image for display.
Hello,
Thank you for being so helpful, the table now looks aligned on my product page on mobile devices too.
there is one thing I don’t know if it can be fixed the external border looks thin and different from the internal border which looks bold.
Thank you so much.
Hey @rafaymed ,
You can edit it by adjusting the style of the table’s border by replacing this code before:
.product-single__description table {
width: 280px !important;
}
with the following code:
.product-single__description table {
width: 280px !important;
border: 0.2px solid #999;
}
Thank you for being so helpful. the table look great and thank you
