Contributor I

Solved

Table - Stack on mobile

Forum|Forum|3 years ago
February 21, 2023
12 replies
4952 views

So, I’m very surprised that the Table element doesn’t have a function to allow stacking columns on mobile.

I’m trying to create a design where you have

[image] [description]

[description] [image]

And I’d like the description to move under the image when I am on mobile.

Currently, it’s really not looking great.
And adding a “mobile only” version table increases the size of the email and it ends up being clipped on Gmail.

The Split option doesn’t work for me as it’s not possible to vertically align the description text

And the column layout just adds useless bits of code + I need to add single columns on top of each 2-column I want to create to give more space and to add titles and description to my design.

Overall, I’m stuck between trying to create a mobile-friendly version of my email and good design :/

Now I understand more and more why most ecom brands are going for the “image” only emails as it makes it much easier to do whatever you want without risking to have emails ending up too heavy because of too many bits of code!

Any help would be appreciated!

Thanks

Campaigns

This topic has been closed for replies.

Best answer by stephen.trumble

Hey @Jaybobo

Thank you so much for your patience! After talking with our product experts I have a small update for you.

Aside from a Split block, the only other option would be to use columns, but then you run into the issue of the content not aligning so it takes a lot of playing around. Ultimately, your options are Table (but the items don't stack), Split where they do stack but they can't align the content vertically, or columns where they stack but they can't align vertically and they may run into alignment issues. The only other options we could come up with are to use images, or custom code this block. While this isn’t anything new to what you have experienced, I hope this helps clarify the ability of each block for you to make the best choice for your marketing.

Hope this helps.

stephen.trumble

Klaviyo Alum

Hey @Jaybobo

Im asking one of our product experts for a bit more information. My only thoughts would be to use the split block or columns but you’ve already said they don’t work for you. Once I get their response I will update you here! Thank you so much for your patience.

-Stephen

stephen.trumbleAnswer

Klaviyo Alum

Hey @Jaybobo

Thank you so much for your patience! After talking with our product experts I have a small update for you.

Aside from a Split block, the only other option would be to use columns, but then you run into the issue of the content not aligning so it takes a lot of playing around. Ultimately, your options are Table (but the items don't stack), Split where they do stack but they can't align the content vertically, or columns where they stack but they can't align vertically and they may run into alignment issues. The only other options we could come up with are to use images, or custom code this block. While this isn’t anything new to what you have experienced, I hope this helps clarify the ability of each block for you to make the best choice for your marketing.

Hope this helps.

-Stephen

A

arg

Contributor II

Hi @stephen.trumble,

I also have the same issue, Is there a stack on mobile option to display table on rows not columns in mobile. look at the image, the product photo is crunshed.

A

Anonymous

Also looking for a solution to this. Would be solved by a display:block and width: 100% !important, but there’s nowhere to enter those custom properties...

chloe.strange

Community Manager

Hi @PhilipL,

I wanted to share this resource to use for building a custom-coded HTML Product Feed block in our guide on Extending Klaviyo’s Product Block Functionality from our Solution's Architects.

Essentially, you will use a combination of Catalog Lookup Tags and Django Template Tagging to achieve your goals. Please let me know if you have any questions after taking a look through the linked guide. However, I believe it will provide you with all the information you need!

We only recommend using custom HTML for technically savvy marketers, or for anyone who has access to a developer. You can also check out our partner directory for partner assistance. I hope this helps!

~Chloe

D

dgibbs

Active Contributor IV

I was facing this same issue and getting confused.

The “Split” block could stack in mobile - but could not add extra columns or rows.

The “Tables” could have extra columns and rows but only squish on mobile

I have found that using the “Columns” Layout allowed me to make 3 columns and insert a 3 row table into each of them so it now looks right for both desktop and stacks the way I wanted it to on mobile.

Hope this helps - thanks

A

Anonymous

I have found that using the “Columns” Layout allowed me to make 3 columns and insert a 3 row table into each of them so it now looks right for both desktop and stacks the way I wanted it to on mobile.

While I think that is fine for normal layouts, that would not work for dynamic tables. If you have two products with image in the left column and description in the right column, when it wraps you would get two images, then two descriptions – not functional.

D

dgibbs

Active Contributor IV

if it is only 1 row, 2 columns - Image on one side, description on the other, would you not be able to use multiple “Split” content blocks to kind of build your own table with them.

You can then set the stacking order for each of them individually so they stack image description, image description etc.

If each set needs multiple cells/rows that need to stay grouped as you wrap to mobile, then the “Columns” layout should be able to manage that.

A

Anonymous

would you not be able to use multiple “Split” content blocks to kind of build your own table with them.

Sorry, no, I think you misunderstand the dynamic rows that are needed. This is for order confirmations etc, where the number or rows are unknown – they repeat the one row you build, and can only repeat a single table (or two like you initial suggestion, but the wrapping issue will happen)

D

dgibbs

Active Contributor IV

Okay - Im with you now, this is a really interesting challenge… I hope some devs are following this thread and able to help with the next patch update

Show more replies

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials