two column stack with extra padding on mobile

  • 0
  • 1
  • Question
  • Updated 5 years ago
  • Answered
In my mailing, MFS - Retirement Planning, I have a bulleted list divided into two columns. This looks good on desktop and tablet previews but when I go to mobile and the columns are stacked there is a lot of white space between the two columns so my list doesn't look right. Neither column has any margin or padding. What can I do to fix this?
Photo of Southeast Financial

Southeast Financial

  • 31 Posts
  • 1 Reply Like
  • confused

Posted 5 years ago

  • 0
  • 1
Photo of Benton Cummings

Benton Cummings, Senior Manager, Customer Support

  • 491 Posts
  • 52 Reply Likes
Official Response
Hi Southeast Financial,

I jumped into your account to take a look at the mailing, and I see what you're referring to. Unfortunately, there won't be a way for mobile view to read the lists in those 2 columns as a single column when stacked. Because those 2 lists exist in separate blocks and separate columns, the mobile rendering is going to see them that way, and allow enough space for them to be separated. Also, because bulleted lists are slightly inset in the content block, that will combine with the natural spacing to give it the appearance of a slightly wider gap than normal.

If you're wanting to retain the integrity of the two lists as a single list in mobile view, then you'll want to consider making that a single column layout and ensure the whole list is continuous in a single content block.

So, instead of this:

You'd be looking at this:

Aligning these into a single list in a single block will retain the integrity of that list in mobile view for you.

Thanks so much, and I hope this helps!!