Jump to content

Table via a code block

Recommended Posts

Site URL: https://turbot-armadillo-ja5c.squarespace.com/

Hi folks,

site p/word is: SandraCB

I have managed to design a table via code I found on the forum to use in the 'additional info' of our product block.  This can be seen here https://www.shop.chenebleu.com/wine-shop-uk/abelard12  The issue I am having is, that in adding this code into the box it then makes the alignment of the text underneath more indented as per the image attached.  If I remove the code block from the 'additional info' section of the Abelard product the text all lines up once more, so it is definitely that code causing the issue.  This is the code:

<style type="text/css">
  .table {
  display: table;
  background-color: #796b63;
  }
  .row {
  display: table-row;
    width: 60%;
  }
  .column {
     color: #ccd6dd !important;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 15px;
  width: 10%;
  border-right: 1px white;
  }


</style>
<div class="table"style="width:100%">
  <div class="row">
     <div class="column"><p style="color:white;font-size:20px;">2012</p>
     <p style="color:white;">75cl €66.00<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>
       
     <div class="column"><p style="color:white;font-size:20px;">2011</p>
     <p style="color:white;">75cl €66.00<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

       <div class="column"><p style="color:white;font-size:20px;">2010</p>
     <p style="color:white;">75cl n/a<br>150cl €135.00<br>300cl €271.00</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

     <div class="column"><p style="color:white;font-size:20px;">2007</p>
     <p style="color:white;">75cl €66.00<br>150cl n/a<br>300cl n/a</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>
       
    <div class="column"><p style="color:white;font-size:20px;">2006</p>
     <p style="color:white;">75cl €66.00<br>150cl n/a<br>300cl n/a</p><a href="<a href="https://static1.squarespace.com/static/5e70d8b08c15db0634d1a96e/t/5ebd32c409f109687c019d97/1589457622251/Abelard+2012+FR.pdf"><u>Tasting Notes</u></a></div>

Any ideas?

Thank you!

Sandra
 

 

line.jpg

Link to comment
  • Replies 4
  • Views 630
  • Created
  • Last Reply

The lower paragraphs are not indented, they have a 17px padding in the CSS.

The table does not, so it looks like the paragraphs are pushed in.

You could either remove that padding, or reconfigure the table.

The table also has issues on mobile that might be worth fixing first, because the padding/margins may need to be changed after you do that.

Link to comment

@rwp Hi, thank you for your reply.  The padding in the CSS seems to only affect the padding at the top not the sides?  I was very surprised to see the mobile issue, as I had added @brandon suggested code on the post where I found the code.  Bizarrely though if I click on the CSS box it automatically lines up the table, on mobile view - as per the attached image.  Yet this never shows on my own mobile?!

@media only screen and (max-width: 860px) {
       .column {
           display: block;
           width: 100%;
           border-bottom: 1px solid white;
       }
   })
Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.