Create a table or rows for my event page.

roadsideblooms
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
AvidBrio
Shopify Expert
156 8 14

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

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
roadsideblooms
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
AvidBrio
Shopify Expert
156 8 14

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

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
roadsideblooms
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