Vertical dividers convert to horizontal on mobile, but increase thickness & lose padding?

SteveH682
Occasional Participant

When a vertical divider separates two columns in desktop view, the mobile response converts them to stacked columns with a horizontal divider. That's great, however, the converted divider's appearance does not match the regular horizontal dividers in use in the template. 

 

Screen Shot 2022-09-01 at 12.39.41 PM.png

 

Notice how thick the line is on the bottom converted divider compared to the divider above it. Also, the margins/padding are inconsistent with the regular dividers. No top/bottom padding, and line stretches across side margins. 

 

The only way to minimize the discrepancy for mobile viewing is to manually increase the height of all regular dividers by a few pixels and add an extra spacer below on the left column and one above in the right column.

 

Screen Shot 2022-09-01 at 1.18.56 PM.png

 

The converted divided still does not match the side margins, but the thickness matches. But, the desktop view is badly compromised with these adjustments. 

 

Screen Shot 2022-09-01 at 1.18.08 PM.png

The columns don't align at the top, and the vertical divider is too thin.

 

Anyone have a better solution?

 

 

 

1 REPLY 1
William_A
Moderator

Hello @SteveH682 ,

 

At this time we don't really have a suggested workaround with this, beyond making minor adjustments to the dividers' widths and previewing between desktop and mobile views to see what looks best. I've passed along your feedback and the example images to our dev team for further review. If and when they have an update on this, they'll notify you, but at this time there's no hard ETA on any changes to the mobile view conversion.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
William A
Community & Social Media Support
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Did I answer your question? If so, please mark my post as an "Accepted Solution" by clicking the Accept as Solution button in the bottom right hand corner of this post.

Anyone can be a marketer! Visit our Blog & Resources page to brush up on the latest tips and tricks.
  • Avatar

    Support Tips

    Social Media

    "There's a multitude of ways to engage your audience through us using your social platforms - via ads, social post metrics, email links, and more! " - Will

    See Article
  • Avatar

    Support Tips

    Call-To-Action Links

    "Target your most engaged contacts by creating a segment. Create a special offer or show your appreciation!" - Caitlin

    See Article
  • Avatar

    Support Tips

    Welcome Your Audience

    "Greet new contacts with one or more automated Welcome Emails depending on their interests or your business goals." - Nick

    See Article