Create a table or rows for my event page.

Highlighted
Tourist
10 1 0

Hi folks!

Can anyone help with how I can create a table or rows for my event page? I have a series of events currently and they're being smushed into one line. This is impact the purchase ticket functionality on desktop.

Ideally I'd like to have 3-4 events in ea respective row. May be important to note we won't always have as many events as we do right now but we like to be able to keep unscheduled events as coming soon.

Here is the page I'm referencing: https://roadsidebloomsshop.com/pages/workshop-events

Please let me know if I can provide any additional information!

0 Likes
Highlighted
Shopify Expert
43 1 4

you can create a table from excel and copy paste to the Shopify page to show its show table.  or you can use these tools https://www.tablesgenerator.com/html_tables

0 Likes
Highlighted
Tourist
10 1 0

Thanks for this! My question would be where do I put this in the code then? Below is what the code currently looks like. Ideally I'd like for 4 events to show in rows of 3 (I need to ensure they have enough space for a brief description and purchase option). When I've tried using the simple <table> <td> It shows as broken html.

    <div class="container text-center py-5 events">
   <div class="row elopement-events"> 
     {% for block in section.blocks %}
     <div class="col-lg-4 mb-4 elopement">
       <figure class="imghvr-push-up"><img src="{{ block.settings.image | img_url : 'master' }}" alt="example-image">
         <div class="card-body px-0 py-2">
           <h2>{{ block.settings.title }}</h2>
           <p>{{ block.settings.content }}</p>
         </div>
          {% if block.settings.button_url != blank %}
         <a href="{{ block.settings.button_url }}" class="btn">{{ block.settings.button }}</a>
         {% endif %}
         <figcaption>
           <h2>{{ block.settings.title }}</h2>
          <p>{{ block.settings.description }}</p>
           {% if block.settings.button_url != blank %}
           <a href="{{ block.settings.button_url }}" class="btn">{{ block.settings.button }}</a>
           {% endif %}
         </figcaption>
         <a href="javascript&colon;;"></a></figure>
     </div>
     {% endfor %}
     </div>
  </div>
{% schema %}
  {
    "name": "Workshop Events",
    "settings": [],
 
"blocks": [
      {
        "type": "workshop-events",
        "name": "Workshop Events",
        "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Image"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "content",
        "label": "content"
      },
      {
        "type": "richtext",
        "id": "description",
        "label": "Description"
      },
  {
        "type": "text",
        "id": "button",
        "label": "Button Text",
"default": "Register Now"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button Text"
      }
        ]
      }
    ]
  }
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}
0 Likes
Highlighted
Shopify Expert
43 1 4

you can add this code 

 

 

 <div class="col-md-3 col-sm-6 col-xs-12">

 


find this code and replace class value- <div class="col-lg-4 mb-4 elopement">  

her you can find more information , also you can add your code and test here. https://codepen.io/ondrejsvestka/pen/gWPpPo

0 Likes
Highlighted
Tourist
10 1 0

That seemed to move things around in a weird way. Screen shot below...

Screen Shot 2020-11-19 at 11.28.49 AM.png

0 Likes