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

this is code that I use but is not working:

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

Can someone please tell me where I`m wrong?

Solution

instead of min-width use max-width(using the non-mobile approach) , and just use text-align and not text-align-last because it only align the last line in that case.

see a basic demo here:

.test-one {
  text-align: left
}
@media screen and (max-width: 480px) {
  .test-one {
    text-align: center;
  }
}

<div class="test-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a finibus mauris. Vestibulum pellentesque libero eget rutrum pellentesque. Aenean sit amet ullamcorper erat, quis egestas ex. Nulla non suscipit enim, at 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
  at condimentum est. Cras elementum massa et odio ultrices scelerisque.</div>

If you want you can use the mobile approach as you were using by keeping the min-width in your media query, it will be like this:

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

<div class="test-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris a finibus mauris. Vestibulum pellentesque libero eget rutrum pellentesque. Aenean sit amet ullamcorper erat, quis egestas ex. Nulla non suscipit enim, at 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
  at condimentum est. Cras elementum massa et odio ultrices scelerisque.</div>