Mads Kristensen Mads Kristensen - 3 months ago 14
CSS Question

correct notation of css text indent

Problem:

I have to indent my text. I have had a lot of problems with it, so I need to learn how to do it correctly now. On the desktop version the indent is looking fine. The problem is when I see on a responsive point of view, all the text is going out of control. Here is the version I have now:

enter image description here

Here is the version after I do a text indent on an iPhone 5 with the CSS below:

enter image description here

Code:

feature-bar {
background-color: #f8f8f8;
height: 200px;
margin-top: 0px;
text-decoration: solid;
color: red;
text-indent: 100px;
padding-top: 20px;
}


Question:

How do I do a correct text indent, so it is also looking correct on a mobile?

UPDATE

After the answers I found out I can use
<li>
or
vw
. On a mobile point of view wanted that the clock 13.00 - 13.20 should stay on one line, and the text should start on the other line. Should I make a mediaquery with something for solving this?

SECOND UPDATE

Example on how it should look on mobile
enter image description here

Answer

instead of pixels, use viewport units , specificallyuse vw which is viewport width which will decrease as the width of the screen gets smaller

see here more CSS Units

see snippet below :

or better see here > jsfiddle ( you can resize here better )

.feature-bar {
    background-color: #f8f8f8;
    height: 200px;
    margin-top: 0px;
    text-decoration: solid;
    color: red;
    text-indent: 10vw;
    padding-top: 20px;
}
<div class="feature-bar">
Lorem ipsum dolor sit amet, aenean sed egestas ultricies eget ornare, luctus proin malesuada. A ac lacinia. Vulputate molestie suspendisse nullam. Ornare velit ac vitae, duis duis, ac diam pede netus. Ipsum nibh ipsum, phasellus id quis vitae consectetuer blandit dolor. 
</div>
<div class="feature-bar">
Nec nulla placerat aliquam nulla urna tellus, ac ligula imperdiet, facilisis laoreet nec egestas, porttitor ante, wisi blandit sit erat. Vestibulum fermentum ac. Amet augue, mattis nec integer lorem lorem. Neque enim, pulvinar leo lorem donec, ac in. Etiam nec vestibulum justo praesent mi, pharetra praesent erat enim et purus sed, vel porttitor morbi voluptatem ante pellentesque ligula. In interdum tellus elit volutpat, purus gravida vitae vivamus ante quis, at amet, urna scelerisque suspendisse quis tortor vestibulum.
</div>

UPDATE after your edit to the question .

use lists :

careful, ul has a default padding , change it to padding-left:5vw so it will get smaller when you resize the window

see snippet below or fiddle here : jsfiddle with list

ul {padding-left:5vw}
br { display:none;} /* if you want all content of `li` to be on same row , time and text */

@media only screen and (max-width: 767px) { /* mobile devices */
  
  br { display:block; } /* time on one row, text on the next rows */
  }
<h1>
program for seminar
</h1>

<ul>
  <li>13.00 - 13.30 <br />
Lorem ipsum dolor sit amet, non leo arcu risus fermentum at quam. Ac tincidunt vel non, quisque at libero odio ac eu sed, lectus condimentum non scelerisque tortor ligula.
</li>
  <li >14.00 - 14.30<br />
Consectetuer diam consequat cursus fusce odio, fusce lacinia quis sit, sed etiam consequat pulvinar. Ut nisl, sed vulputate, dui ut pede varius in aenean, blandit accumsan pellentesque.
</li>
</ul>