correct notation of css text indent

Question

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:

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

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

Answer 1

The standard solution would be using left padding. Don't know what your HTML is like, but this would be something like

ul {
  padding-left: 100px;
  padding-right: 40px;
  outline: 1px solid red;/* just for demo purposes to reveal the padding */
}
li {
  padding-bottom: 20px;
  list-style: none;
}

<p>Heading</p>
<ul>
  <li>first item, showing what it looks like when an item wraps to more than one line asdf asdf asdf asdf sdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</li>
  <li>qwer</li>
</ul>

If you want extra vertical space around the list, you could do one of two things. Here I'm making the total space at the bottom of the ul 30px

ul {
    padding-bottom: 10px;/* is in addition to the 20px from the last li */
}

or

ul {
    padding-bottom: 30px;
}
li:last-child {
    padding-bottom: 0;
}

(The second option can be more reliable: you don't have to think about the math, and the person working on the site doesn't have to remember/know that the last li is contributing padding. Not a big deal in a simple case like this, but useful to keep in mind in cases where the css is more involved)

No matter what you do, you'll probably want to do something like .some-class-name and .some-class-name li instead of the bare ul and li in my examples - otherwise this will style every list on your site!

Note that I'm using bottom padding rather than top - that isn't strictly necessary, but I find favoring bottom padding and bottom margin (as opposed to top) a good habit to get into. Knowing that spacing is almost certainly coming from the upper thing can make things easier to debug and/or adjust

---

Bonus

Following your update to the question: one way of putting the time on its own line on mobile: wrap the time in some element that displays inline on desktop and block on mobile. span is display: inline by default, making it a handy choice here. A generic solution would be

<li>
    <span>mobile own line</span> other stuff
</li>

@media (max-width: yyypx) {
    span {
        display: block;
    }
}

where yyy is your mobile break point. Again, that will probably be .some-class-name span.

Because this is a time value, you can be all beautifully semantic with the time element:

<li><time datetime="13:00/13:30">13:00&ndash;13:30<time> other stuff</li>

and then target the time in the css (see http://www.w3schools.com/tags/att_time_datetime.asp and https://stackoverflow.com/a/10403376/1241736)

Answer 2

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>

Answer 3

This is tabular data. Just use a table, it's semantic and requires very little maintenance or media queries.

table {
  width: 80%;
  margin: auto;
  color: red;
}
table tr td {
  vertical-align: top;
}
table tr td:first-child {
  white-space: nowrap;
}

<table>
  <tr>
    <td>11:30 - 12:30</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, nihil nam veniam perferendis facilis error.</td>
  </tr>
  <tr>
    <td>12:30 - 13:30</td>
    <td>Lorem ipsum dolor sit amet.</td>
  </tr>
  <tr>
    <td>13:30 - 14:30</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nihil!</td>
  </tr>
</table>

Answer 4

This happens because the text-indent only applies to a new rule. Where in your phone's example, the rule gets broken and therefore, goes to the start of the div.

Change text-indent: 100px into padding-left: 100px

In case you have other content that shouldn't be aligned, wrap the content in a span / div and apply the styling to this element.