Link to home
Start Free TrialLog in
Avatar of Mike Waller
Mike WallerFlag for United States of America

asked on

Make Line Items Look Good Over Mobile

if you look at my code over mobile, the sentences that wrap tuck under the numbers and the shorter sentences get indented too much. looks great in desktop but does anyone know how to fix these 2 issues in mobile?

<style type="text/css">
.display-element {
}

.display-label {
  display: inline-block;
  width: 30px;
  padding-top: 5px;  
  font-weight:bold;
}

.display-field {
  display: inline-block;
  padding-left: 5px;
  padding-top: 5px;
  text-indent: 0px;
  vertical-align: top;
  max-width: 500px;
  overflow: hidden;
}
</style>
<div class="display-element"><span class="display-label">1.</span> <span class="display-field"> This is a very, very, very, very, very, very, very, very, very, very, very, very long sentence</span></div>

<div class="display-element"><span class="display-label">2.</span> <span class="display-field"> This is a very, very, very, very, very, very, very, very, very, very, very, very long sentence</span></div>

<div class="display-element"><span class="display-label">3.</span> <span class="display-field"> This is item three.</span></div>

<div class="display-element"><span class="display-label">4.</span> <span class="display-field"> This is almost a very, very, very long sentence</span></div>

<div class="display-element"><span class="display-label">5.</span> <span class="display-field"> This is item number five.</span></div>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Pankaj Jangir
Pankaj Jangir
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Mike Waller

ASKER

YOU rock!