Jump to content

Image in HTML table not displaying correctly in mobile version

Go to solution Solved by GLUE,

Recommended Posts

Hi, I'm having trouble with a table I'm currently working on. It displays evenly on desktop version, where the table elements have correct spacing and all the images are the exact same size. But on mobile version one of the images appear distorted. I have no idea what's causing it.

See attached screenshots of mobile and desktop previews.

Here's the source for the current table:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-dy65{background-color:#e1f33f;border-color:inherit;text-align:left;vertical-align:top}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-0pky"></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/e1a3968e-d164-4792-864f-c146a5d97f71/A%2BTOD-comparison-cover_1.png?format=300w" width=“”></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/947c9945-a8de-481e-a2fc-5b59590b2008/A%2BTOD-comparison-cover_2.png?format=300w" width="150”></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/ace4af37-96c6-403d-b107-2013caa9d3d2/A%2BTOD-comparison-cover_3.png?format=300w" width=""></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/d3fca47b-7e30-48fd-9ce5-be2e9abc6ee8/A%2BTOD-comparison-cover_4.png?format=300w" width=""></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-dy65"> </td>
    <td class="tg-0pky"><span style="font-weight:bold">Reframing and Navigating </span><br><span style="font-weight:bold">Disruption</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Essential Frameworks for </span><br><span style="font-weight:bold">Disruption and Uncertainty</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Beta Your Life: Existence </span><br><span style="font-weight:bold">in a Disruptive World</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Disruption as a Springboard </span><br><span style="font-weight:bold">to Value Creation</span></td>
  </tr>
  <tr>
    <td class="tg-dy65">Volume</td>
    <td class="tg-0pky">Volume I - <br>FOUNDATIONS               </td>
    <td class="tg-0pky">Volume II - <br>FRAMEWORKS</td>
    <td class="tg-0pky">Volume III - <br>YOUR LIFE</td>
    <td class="tg-0pky">Volume IV - <br>YOUR BUSINESS   </td>
  </tr>
  <tr>
    <td class="tg-dy65">Focus</td>
    <td class="tg-0pky">How to make sense of <br>our complex, nonlinear, <br>and unpredictable world</td>
    <td class="tg-0pky">Practical frameworks to help <br>you and your business <br>stay relevant in the 21st century</td>
    <td class="tg-0pky">What does constant change <br>and uncertainty mean to <br>you as an individual?</td>
    <td class="tg-0pky">What does our unpredictable, <br>complex, and systemic world <br>mean for you as a business?</td>
  </tr>
  <tr>
    <td class="tg-dy65">Bestseller <br>Categories</td>
    <td class="tg-0pky">Future Studies</td>
    <td class="tg-0pky">Business Planning &amp; <br>Forecasting, Future Studies</td>
    <td class="tg-0pky">Career &amp; Self Help, <br>Business Education</td>
    <td class="tg-0pky">Green Business &amp; <br>Sustainability, Strategic<br>Management &amp; Forecasting   </td>
  </tr>
  <tr>
    <td class="tg-dy65">Download</td>
    <td class="tg-0pky"><a href="https://www.amazon.com/dp/B0BN4CNW3R" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume I eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BQCYRJKW" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume II eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BT13RR9W" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume III eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BZWTQGMV" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume IV eBook</span></a></td>
  </tr>
  <tr>
    <td class="tg-dy65">Order</td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Navigating/dp/195511000X" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume I Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Uncertainty/dp/1955110026" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume II Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Disruptive/dp/1955110042" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume III Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Springboard/dp/1955110069" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume IV Print</span></a></td>
  </tr>
  <tr>
    <td class="tg-dy65">Articles</td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/disruptive-futures-institute-releases-the-definitive-guide-to-thriving-on-disruption-volume-i-cdf7a30406a0" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. I</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/the-ultimate-blueprint-for-21st-century-relevance-volume-ii-essential-frameworks-for-disruption-6a30a2476ccb" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. II</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/this-time-its-personal-6ad49fecf293" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. III</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/bestselling-futurist-roger-spitz-releases-the-definitive-manual-for-leveraging-on-disruption-5f36a63f23e2" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. IV</span></a></td>
  </tr>
</tbody>
</table>

Please advice how to fix this. My client's website:
https://www.thrivingondisruption.com/

 

Big thanks,

Zarina

Desktop view.png

Mobile view.png

Link to comment

Can you share the page this table is on? Enabled and password protected if you don't want it live.

 

Quick feedback if you'd find it useful: You may want to have the book images with text as an element on the page rather than a background where they get cropped on wider screens.

image.thumb.png.fba431c339f88cf50b7ecc7848b870fa.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

There were a few errors which I've fixed, but I'm not sure it completely fixes the issue you wanted. How do you want it to look on mobile?

 

<style type="text/css">
.tg  {border-collapse:collapse; border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif; font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-dy65{background-color:#e1f33f;border-color:inherit;text-align:left;vertical-align:top;}
.tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top;}
.tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
.tg  {width:100%; min-width:800px; overflow:auto !important;}
</style>

<table class="tg">
<thead>
  <tr>
    <th class="tg-0pky"></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/e1a3968e-d164-4792-864f-c146a5d97f71/A%2BTOD-comparison-cover_1.png" width=""></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/947c9945-a8de-481e-a2fc-5b59590b2008/A%2BTOD-comparison-cover_2.png" width=""></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/ace4af37-96c6-403d-b107-2013caa9d3d2/A%2BTOD-comparison-cover_3.png" width=""></th>
    <th class="tg-c3ow"><img src="https://images.squarespace-cdn.com/content/v1/6307c394855bbb0c329001d1/d3fca47b-7e30-48fd-9ce5-be2e9abc6ee8/A%2BTOD-comparison-cover_4.png" width=""></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-dy65"> </td>
    <td class="tg-0pky"><span style="font-weight:bold">Reframing and Navigating </span><br><span style="font-weight:bold">Disruption</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Essential Frameworks for </span><br><span style="font-weight:bold">Disruption and Uncertainty</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Beta Your Life: Existence </span><br><span style="font-weight:bold">in a Disruptive World</span></td>
    <td class="tg-0pky"><span style="font-weight:bold">Disruption as a Springboard </span><br><span style="font-weight:bold">to Value Creation</span></td>
  </tr>
  <tr>
    <td class="tg-dy65">Volume</td>
    <td class="tg-0pky">Volume I - <br>FOUNDATIONS</td>
    <td class="tg-0pky">Volume II - <br>FRAMEWORKS</td>
    <td class="tg-0pky">Volume III - <br>YOUR LIFE</td>
    <td class="tg-0pky">Volume IV - <br>YOUR BUSINESS</td>
  </tr>
  <tr>
    <td class="tg-dy65">Focus</td>
    <td class="tg-0pky">How to make sense of <br>our complex, nonlinear, <br>and unpredictable world</td>
    <td class="tg-0pky">Practical frameworks to help <br>you and your business <br>stay relevant in the 21st century</td>
    <td class="tg-0pky">What does constant change <br>and uncertainty mean to <br>you as an individual?</td>
    <td class="tg-0pky">What does our unpredictable, <br>complex, and systemic world <br>mean for you as a business?</td>
  </tr>
  <tr>
    <td class="tg-dy65">Bestseller <br>Categories</td>
    <td class="tg-0pky">Future Studies</td>
    <td class="tg-0pky">Business Planning &amp; <br>Forecasting, Future Studies</td>
    <td class="tg-0pky">Career &amp; Self Help, <br>Business Education</td>
    <td class="tg-0pky">Green Business &amp; <br>Sustainability, Strategic<br>Management &amp; Forecasting   </td>
  </tr>
  <tr>
    <td class="tg-dy65">Download</td>
    <td class="tg-0pky"><a href="https://www.amazon.com/dp/B0BN4CNW3R" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume I eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BQCYRJKW" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume II eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BT13RR9W" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume III eBook</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/gp/product/B0BZWTQGMV" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume IV eBook</span></a></td>
  </tr>
  <tr>
    <td class="tg-dy65">Order</td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Navigating/dp/195511000X" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume I Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Uncertainty/dp/1955110026" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume II Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Disruptive/dp/1955110042" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume III Print</span></a></td>
    <td class="tg-0pky"><a href="https://www.amazon.com/Definitive-Guide-Thriving-Disruption-Springboard/dp/1955110069" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Volume IV Print</span></a></td>
  </tr>
  <tr>
    <td class="tg-dy65">Articles</td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/disruptive-futures-institute-releases-the-definitive-guide-to-thriving-on-disruption-volume-i-cdf7a30406a0" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. I</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/the-ultimate-blueprint-for-21st-century-relevance-volume-ii-essential-frameworks-for-disruption-6a30a2476ccb" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. II</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/this-time-its-personal-6ad49fecf293" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. III</span></a></td>
    <td class="tg-0pky"><a href="https://medium.com/disruptive-futures-institute/bestselling-futurist-roger-spitz-releases-the-definitive-manual-for-leveraging-on-disruption-5f36a63f23e2" target="_blank" rel="noopener noreferrer"><span style="text-decoration:underline">Learn More Vol. IV</span></a></td>
  </tr>
</tbody>
</table>

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@GLUE Glad to hear I fixed the issues in your code, could you mark my post as the solution? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.