Hello @Cara,

Thanks for sharing your question with the Klaviyo Community!

When using a webfeed to be displayed as a single row with three columns, I would recommend using a table block populated by your feed. 

Table blocks, unlike text blocks will not stack when viewed on mobile devices. Furthermore, when using a table block, it would allow you to further control in customizing the width of your images populated in the feed. I’ve mentioned this in a previous Community post which I’ve linked below:

An example of how to populate your feed within a table block can be found in the Guide to Adding a Custom Web Feed in an Email article under the Using a JSON Dictionary subsection.

I hope this helps!

David

Currently having this same issue. 

Insta posts are showing in one column. Trying to use the table and cannot figure out what is supposed to be used for the variable in the rows? And do you delete all columns or just the header text?

Hey @juliesue 

Thank you for asking the Klaviyo Community for further understanding to set up your insta post in your email template! 

You will want to leave the columns in the table block and remove the header text. Next, you need to populate your table with the variables of your choice. You can find these variables when previewing your web feed. To preview your web feed, navigate to the Data Feeds section of your Klaviyo account. Click on the feed that references Instagram. In the upper right-hand corner, click Preview. You can then use those variables in your table block as shown below.

Please read through the articles and community post that @david.to shared here previously as they will give you more information and clarification on how to set this up the way you want. 

Thank you so much for being part of the Klaviyo Community!

Currently having a similar issue. I set up the RSS Feed using the instructions provided. 
I have managed to get 3 posts in a row but it is not centre aligned, despite having ‘text-align: center’ in the code. Can anyone shed light on how I can fix this? 

Code is as follows: 

<div>{% for item in feeds.instagram.rss.channel.item|slice:":3" %}
<table style="display: inline-block;">
<tbody>
<tr>
<td style="padding-right: 10px; padding-left: 10px; width: 160px; text-align: centre;"><a href="{{ item.link }}"> <img style="margin: 1px auto; max-width: 180px; max-height: 180px; display: block;" src="{% if item|lookup:'media:content'|lookup:'0'|lookup:'@url' %}{{ item|lookup:'media:content'|lookup:'0'|lookup:'@url' }}{% else %}{{ item|lookup:'media:content'|lookup:'@url' }}{% endif %}" /></a></td>
</tr>
</tbody>
</table>
{% endfor %}</div>

Hi @albarock!

 

In your code snippet, it seems that you have a typo in the "text-align" property of the table cell (<td>) element. Instead of "centre," you should use "center" to achieve center alignment. Here's the corrected code:

<div>{% for item in feeds.instagram.rss.channel.item|slice:":3" %}
<table style="display: inline-block;">
<tbody>
<tr>
<td style="padding-right: 10px; padding-left: 10px; width: 160px; text-align: center;"><a href="{{ item.link }}"> <img style="margin: 1px auto; max-width: 180px; max-height: 180px; display: block;" src="{% if item|lookup:'media:content'|lookup:'0'|lookup:'@url' %}{{ item|lookup:'media:content'|lookup:'0'|lookup:'@url' }}{% else %}{{ item|lookup:'media:content'|lookup:'@url' }}{% endif %}" /></a></td>
</tr>
</tbody>
</table>
{% endfor %}</div>

With this change, the table cell (<td>) element should now be centered, and your posts should appear center aligned.

Best,

Brian