Mike Waller
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER