Weird vertical alignment on phone browser using Service element

- 5 years, 3 months ago toddmcguire
  Participant
  
  I’m using the SERVICE element to make a grid of 9 services on this page: https://www.incentahealth.com/corporate-wellness/
  
  The items in the 3×3 grid are properly aligned in the desktop browser view, but on the smaller phone browser view, they appear staggered vertically. Here’s a link to a screen shot showing the correct layout (in the desktop view), while the screenshot on the right shows the incorrect “staggered” effect on the phone browser view.
  
  https://www.dropbox.com/s/v2lfimc471znwtz/SERVICES%20element%20vertical%20alignment%20issue.png?dl=0
  
  Any ideas?
  
  Thanks!
- 5 years, 3 months ago Mirela
  Participant
  
  This reply has been marked as private.
- 5 years, 3 months ago Mirela
  Participant
  Hello,
  
  I fixed it. I added this css into your Custom Css box:
  
  @media (max-width: 767px){ .row > .cl_column { width: 100% !important; float: left; min-width: 400px; } .row.cl_row-cp-middle:not(.cl-col-tablet-full) { display: block !important; }}
  
  We have taken note of this issue and will fix it in the next theme update.
  
  Best regards!

Viewing 2 reply threads

You must be logged in to reply to this topic.