Short text taking up 2 lines - html

Question

I'm finding that on mobile, short text that i know can appear in just 1 line is taking up 2 lines.
I've found that "white-space: nowrap" will make sure that it will appear in 1 line. However, now I have a problem where long text that is supposed to take up 2 lines is now forced to appear in 1 line, which is a problem.
What's causing this issue and how do I solve it?
It's the third Lorem Ipsum
<div class="name">Lorem Ipsum </div>
That's causing this problem
What I want is that text that's supposed to take up 1 line (or 2 lines) take up just 1 line (or 2 lines).
.grid article {
position: relative;
}
.students {
position: absolute;
}
.person {
display: flex;
align-items: center;
margin,
padding: 0px;
}
.name {
letter-spacing: 2.2px;
flex: 1;
margin-left: 20px;
}
.picture {
flex: 0 0 28px;
margin: 0;
}
.person img {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
#media (min-width: 1312px) {
.students {
top: 565px;
}
.name {
font-size: 15px;
letter-spacing: 2.2px;
margin-left: 20px;
}
.person img {
width: 28px;
}
.person {
margin-bottom: -1px;
}
}
#media (max-width: 599px) {
.students {
top: 375px;
}
.name {
font-size: 11px;
letter-spacing: 2.2px;
margin-left: 6px;
}
.person img {
width: 21px;
}
.person {
margin-bottom: 5px;
}
}
<article>
<a href="#">
<div class="photo" style="background-image: url(img/image.png);"></div>
</a>
<div class="text">
<div class="one">Lorem Ipsum</div>
<div class="two">Lorem Ipsum</div>
</div>
<div class="students">
<div class="person">
<div class="picture"><img src="img/sample.jpg"></div>
<div class="name">Lorem Ipsum </div>
</div>
</div>
</article>
Grid Layout CSS
.grid {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: grid;
justify-content: start;
margin-top: -20px;
justify-content: space-between;
}
.grid article {
-ms-flex: 0 0 250px;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid a:hover {
opacity: 0.8;
}
.grid .text {
margin: 0px;
}
#media (max-width: 599px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-row-gap: 140px;
grid-column-gap: 20px;
margin-top: 18px;
}
}

Answer 1

Do you need the image to be next to the text on mobile?
If you want them to stay aligned then just add flex-direction: row; to your person class in the #media (max-width: 599px) and set a max-width on your picture and name div that doesn't exceed 599px.
If you want them to stack then just add flex-direction: column; to your person class in the #media (max-width: 599px)
Note: You may need to adjust width depending on how much text you want next to your image so it doesn't wrap when it hits the width threshold on mobile.
See snippet below.
.grid article {
position: relative;
}
.students {
position: absolute;
}
.person {
display: flex;
align-items: center;
margin,
padding: 0px;
}
.name {
letter-spacing: 2.2px;
flex: 1;
margin-left: 20px;
}
.picture {
flex: 0 0 28px;
margin: 0;
}
.person img {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
#media (min-width: 1312px) {
.students {
top: 565px;
}
.name {
font-size: 15px;
letter-spacing: 2.2px;
margin-left: 20px;
}
.person img {
width: 28px;
}
.person {
margin-bottom: -1px;
}
}
#media (max-width: 599px) {
.students {
top: 375px;
}
.name {
font-size: 11px;
letter-spacing: 2.2px;
margin-left: 6px;
display: block;
width: 100%;
}
.picture {
width: 21px;
max-width: 21px;
}
.person {
flex-direction: row;
max-width: 200px;
}
}
<article>
<a href="#">
<div class="photo" style="background-image: url(img/image.png);"></div>
</a>
<div class="text">
<div class="one">Lorem Ipsum</div>
<div class="two">Lorem Ipsum</div>
</div>
<div class="students">
<div class="person">
<div class="picture"><img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg"></div>
<div class="name">Lorem Ipsum </div>
</div>
</div>
</article>