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

SteveH682
Occasional Participant
0 Votes

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
Administrator
0 Votes

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