Proper formatting for setting text indentation in CSS

Question

Proper formatting for setting text indentation in CSS

Issue:

I am struggling with indenting text properly on responsive devices. While the desktop version looks fine, the text goes out of control on mobile views. Here is how it currently appears:

https://i.sstatic.net/shW2P.png

Below is an example after applying a text indent using the following CSS for an iPhone 5:

https://i.sstatic.net/k0hUQ.png

Code:

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

Question:

How can I properly format the text indent to display correctly on mobile devices?

UPDATE

Based on the suggestions provided, I experimented with using <li> or vw. Specifically, I want the time range (13.00 - 13.20) to remain on one line and have the text start on the next line for mobile views. Would implementing a media query help resolve this issue?

SECOND UPDATE

Desired appearance on mobile devices: https://i.sstatic.net/PZywF.png

css

Answer 1

Answer №1

To add extra space around a list in HTML, one common approach is to use left padding. Here is an example of CSS code that achieves this:

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

<p>Heading</p>
<ul>
  <li>First item, demonstrating how wrapping occurs when text goes beyond one line</li>
  <li>Second item</li>
</ul>

If you wish to increase the vertical space around the list, there are two methods. One way is to simply add more padding to the bottom of the ul:

ul {
    padding-bottom: 10px; /* in addition to the existing 20px from each li element */
}

Alternatively, you can set specific padding just for the last li element:

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

The latter option may be more foolproof and easier to maintain in complex scenarios.

Regardless of your choice, it's advisable to apply specific classes to differentiate styling for individual lists rather than affecting all lists site-wide with generic selectors like ul and li.

Lastly, using bottom padding instead of top padding is recommended for better organization and debugging in CSS layouts.

Bonus Tip

In response to your mobile display requirement, consider wrapping the time value in a block-level element on small screens. An example implementation could look like:

<li>
    <span>Time on new line for mobile</span> Additional content
</li>

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

Adjust the breakpoint value in the media query (yyypx) as needed. Additionally, for semantic markup, utilize the time HTML element:

<li><time datetime="13:00/13:30">13:00-13:30<time> Additional content</li>

Further enhance this styling by targeting the time element in your CSS rules according to best practices.

Answer 2

To add extra space around a list in HTML, one common approach is to use left padding. Here is an example of CSS code that achieves this:

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

<p>Heading</p>
<ul>
  <li>First item, demonstrating how wrapping occurs when text goes beyond one line</li>
  <li>Second item</li>
</ul>

If you wish to increase the vertical space around the list, there are two methods. One way is to simply add more padding to the bottom of the ul:

ul {
    padding-bottom: 10px; /* in addition to the existing 20px from each li element */
}

Alternatively, you can set specific padding just for the last li element:

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

The latter option may be more foolproof and easier to maintain in complex scenarios.

Regardless of your choice, it's advisable to apply specific classes to differentiate styling for individual lists rather than affecting all lists site-wide with generic selectors like ul and li.

Lastly, using bottom padding instead of top padding is recommended for better organization and debugging in CSS layouts.

Bonus Tip

In response to your mobile display requirement, consider wrapping the time value in a block-level element on small screens. An example implementation could look like:

<li>
    <span>Time on new line for mobile</span> Additional content
</li>

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

Adjust the breakpoint value in the media query (yyypx) as needed. Additionally, for semantic markup, utilize the time HTML element:

<li><time datetime="13:00/13:30">13:00-13:30<time> Additional content</li>

Further enhance this styling by targeting the time element in your CSS rules according to best practices.

Answer 3

Answer №2

To avoid using pixels, consider using viewport units, specifically utilize vw which stands for viewport width and will decrease as the screen width decreases.

For more information on CSS units, visit this link: CSS Units

Check out the snippet below:

Alternatively, you can see a demonstration here > jsfiddle (you can resize the window for better viewing)

.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, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
</div>
<div class="feature-bar">
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia facilisis, magno lacus vehicula varius.
</div>

After editing your question, consider using lists:

Note that the ul tag has default padding, so adjust it to padding-left:5vw to make it smaller when resizing the window.

See the snippet below or access the fiddle here: jsfiddle with list

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

@media only screen and (max-width: 767px) { /* For mobile devices */
  
  br { display:block; } /* Time on one row, text on the next rows */
}

<h1>
Seminar Program
</h1>

<ul>
  <li>13.00 - 13.30 <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem arcu, consequat sed ex eu, bibendum fringilla est.
</li>
  <li >14.00 - 14.30<br />
Suspendisse fermentum nisl eget velit gravida tempus. Donec viverra velit vel aliquam ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</li>
</ul>

Answer 4

To avoid using pixels, consider using viewport units, specifically utilize vw which stands for viewport width and will decrease as the screen width decreases.

For more information on CSS units, visit this link: CSS Units

Check out the snippet below:

Alternatively, you can see a demonstration here > jsfiddle (you can resize the window for better viewing)

.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, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
</div>
<div class="feature-bar">
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia facilisis, magno lacus vehicula varius.
</div>

After editing your question, consider using lists:

Note that the ul tag has default padding, so adjust it to padding-left:5vw to make it smaller when resizing the window.

See the snippet below or access the fiddle here: jsfiddle with list

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

@media only screen and (max-width: 767px) { /* For mobile devices */
  
  br { display:block; } /* Time on one row, text on the next rows */
}

<h1>
Seminar Program
</h1>

<ul>
  <li>13.00 - 13.30 <br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem arcu, consequat sed ex eu, bibendum fringilla est.
</li>
  <li >14.00 - 14.30<br />
Suspendisse fermentum nisl eget velit gravida tempus. Donec viverra velit vel aliquam ultrices. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</li>
</ul>

Answer 5

Answer №3

The reason behind this issue is that the text-indent property only affects a new line of text. In the case of your mobile phone's display, the rule is interrupted which causes the text to go back to the beginning of the division.

To fix this issue, you can replace text-indent: 100px with padding-left: 100px

If you have other content that should not be affected by this alignment adjustment, consider wrapping that content in a span or div element and applying the styling specifically to that element.

Answer 6

The reason behind this issue is that the text-indent property only affects a new line of text. In the case of your mobile phone's display, the rule is interrupted which causes the text to go back to the beginning of the division.

To fix this issue, you can replace text-indent: 100px with padding-left: 100px

If you have other content that should not be affected by this alignment adjustment, consider wrapping that content in a span or div element and applying the styling specifically to that element.

Answer 7

Answer №4

This is tabular information that can be easily displayed using a table. Tables are semantic and require minimal maintenance or adjustments with 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 8

This is tabular information that can be easily displayed using a table. Tables are semantic and require minimal maintenance or adjustments with 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>

Proper formatting for setting text indentation in CSS

Answer №1

Bonus Tip

Answer №2

Answer №3

Answer №4

Similar questions

Placing a pair of labels onto a bootstrap form while ensuring column alignment

Tips for ensuring only one submenu is open at a time

The Transform feature doesn't seem to be functioning as expected within the Bootstrap

Tips for deleting the drop-down arrow from Mozilla Firefox

Basic JavaScript framework centered around the Document Object Model (DOM) with a module structure similar to jQuery. Currently facing challenges with

Is there a way to implement a flex display in my react slider component?

The CSS selector for attribute ending with a specific value is not functioning as anticipated

Stop the bubbling effect of :hover

Steps for turning off image maps on a slider for mobile users

Is there a way to eliminate the additional gap found at the bottom of a div element?

JavaScript function that adjusts the top position when toggling

Tips for changing the appearance of an entire table by overriding the table tr:nth-child styling

WebDriver does not support compound class names and will throw an error

Enabling the `dbc.Select()` function to require a dropdown selection in DASH does not automatically highlight an empty dropdown

Header and footer that stick in place while content scrolls automatically

Refresh is required for resizing

Using Jquery and CSS to display or conceal table elements depending on viewport width

Tips for disabling scrolling on a <div> using another <div> as a lock

Issue with CSS styles not linking correctly to ejs templates

My CSS code is not successfully positioning the items to the right, despite my best efforts