html - How to left text align on desktop but text align center on small devices? -


this code use not working:

.test-one {     text-align-last: left } @media screen , (min-width: 400px) {     .test-one {         text-align: center;     } } 

can please tell me i`m wrong?

instead of min-width use max-width(using non-mobile approach) , , use text-align , not text-align-last because align last line in case.

see basic demo here:

.test-one {    text-align: left  }  @media screen , (max-width: 480px) {    .test-one {      text-align: center;    }  }
<div class="test-one">lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris finibus mauris. vestibulum pellentesque libero eget rutrum pellentesque. aenean sit amet ullamcorper erat, quis egestas ex. nulla non suscipit enim, @ pretium nisl. donec euismod dolor    ante, id vulputate tortor sagittis ut. praesent ullamcorper justo et tortor venenatis, tempor efficitur nunc aliquet. in bibendum, magna sed pretium pellentesque, sem justo porttitor risus, vitae dapibus urna lectus non massa. suspendisse eleifend condimentum    urna, eu elementum libero ullamcorper mattis. in rhoncus maximus nulla, sed faucibus est venenatis et. nulla tincidunt cursus libero. quisque viverra neque vitae ligula placerat, ac ornare felis luctus. donec et orci ac tellus scelerisque rutrum. donec    @ condimentum est. cras elementum massa et odio ultrices scelerisque.</div>

if want can use mobile approach using keeping min-width in media query, this:

.test-one {    text-align: center  }  @media screen , (min-width: 480px) {    .test-one {      text-align: left;    }  }
<div class="test-one">lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris finibus mauris. vestibulum pellentesque libero eget rutrum pellentesque. aenean sit amet ullamcorper erat, quis egestas ex. nulla non suscipit enim, @ pretium nisl. donec euismod dolor    ante, id vulputate tortor sagittis ut. praesent ullamcorper justo et tortor venenatis, tempor efficitur nunc aliquet. in bibendum, magna sed pretium pellentesque, sem justo porttitor risus, vitae dapibus urna lectus non massa. suspendisse eleifend condimentum    urna, eu elementum libero ullamcorper mattis. in rhoncus maximus nulla, sed faucibus est venenatis et. nulla tincidunt cursus libero. quisque viverra neque vitae ligula placerat, ac ornare felis luctus. donec et orci ac tellus scelerisque rutrum. donec    @ condimentum est. cras elementum massa et odio ultrices scelerisque.</div>


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -