So, I have a div named highlights which contains a bunch of cards. When I put #highlights into another div, named about which only has padding: 5rem 0; (margin would cause the same effect) for its CSS, each card's content is cut short significantly. When highlights is not a child of about or if you remove about's CSS, the cards fully encapsulate their content. This anomaly is only, as far as I know, visible on mobile. I do not have this problem at all on my laptop nor when I use chrome's resolution simulator to test what my website would look like different resolutions. However, when I checked using my IPhone 14 Pro, all my cards' content were cut short even though it was all fine on my laptop under the same resolution.
The code below exemplifies the issue. The first highlight is under about and the second about is a direct child of body.
* {
margin: 0;
}
p {
color: white;
}
#about {
padding: 5rem 0;
}
.highlights {
padding: 3rem 0;
width: clamp(325px, 90vw, 1300px);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
position: relative;
}
.card {
background-color: rgb(30, 30, 30);
padding: 1px;
border-radius: 10px;
position: relative;
}
@media (width <= 1250px) {
.highlights {
grid-template-columns: repeat(1, 1fr);
width: clamp(325px, 90vw, 750px);
}
}
.card > div {
position: relative;
background-color: black;
border-radius: 10px;
z-index: 2;
display: flex;
flex-direction: column;
overflow: hidden;
height: stretch;
}
.card > div > :first-child {
width: 100%;
aspect-ratio: 16/ 9;
background-size: 100%;
background-position: center;
box-sizing: border-box;
background-clip: content-box;
background-repeat: no-repeat;
}
.card > div > :nth-child(2) {
padding: 2rem;
background: linear-gradient(to bottom, rgb(20, 20, 20) 0%, transparent 100%);
display: flex;
flex-direction: column;
}
.card > div > :nth-child(2) > :first-child {
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 1.25rem;
}
.green div {
background-color: green;
}<div id="about">
<div class="highlights">
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">SOFTWARE ENGINEERING FELLOW</p>
</div>
<p>
In the summer of 2023, I worked at Headstarter as the Head
Developer in a three-person team. I led the team to
successfully complete all three full-stack projects we were
assigned, demonstrating strong team leadership, adaptability,
and resilience by quickly learning new tools and languages and
consistently delivering high-quality work under tight
deadlines, even as a beginner.
</p>
</div>
</div>
</div>
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">JUNIOR IT TECHNICIAN</p>
</div>
<p>
In 11th grade, I completed my co-op term at Cloud9, an IT
company, and was later hired as a Junior IT Technician. During
my two years there, I worked with a variety of clients across
Ontario, gaining hands-on experience in tasks such as network
infrastructure planning, cabling and wiring, antenna
installations, and other technical projects, which
strengthened my technical and problem-solving skills.
</p>
</div>
</div>
</div>
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">LOGISTICS & OUTREACH EXECUTIVE</p>
</div>
<p>
I served on the executive team for YRHacks, Canada’s largest
hackathon organization exclusively for high school students.
In 2024, I contributed to logistics, ensuring smooth event
coordination, and in 2025, I led outreach efforts, securing
sponsorships and fostering community engagement. My work
helped support the overall quality, organization, and success
of both events.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="highlights green">
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">SOFTWARE ENGINEERING FELLOW</p>
</div>
<p>
In the summer of 2023, I worked at Headstarter as the Head
Developer in a three-person team. I led the team to successfully
complete all three full-stack projects we were assigned,
demonstrating strong team leadership, adaptability, and
resilience by quickly learning new tools and languages and
consistently delivering high-quality work under tight deadlines,
even as a beginner.
</p>
</div>
</div>
</div>
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">JUNIOR IT TECHNICIAN</p>
</div>
<p>
In 11th grade, I completed my co-op term at Cloud9, an IT
company, and was later hired as a Junior IT Technician. During
my two years there, I worked with a variety of clients across
Ontario, gaining hands-on experience in tasks such as network
infrastructure planning, cabling and wiring, antenna
installations, and other technical projects, which strengthened
my technical and problem-solving skills.
</p>
</div>
</div>
</div>
<div class="card">
<div>
<div />
<div>
<div>
<p class="centerText">LOGISTICS & OUTREACH EXECUTIVE</p>
</div>
<p>
I served on the executive team for YRHacks, Canada’s largest
hackathon organization exclusively for high school students. In
2024, I contributed to logistics, ensuring smooth event
coordination, and in 2025, I led outreach efforts, securing
sponsorships and fostering community engagement. My work helped
support the overall quality, organization, and success of both
events.
</p>
</div>
</div>
</div>
</div>As I said earlier, this seems to only be visible on phone. While spending hours figuring this out, I hosted the example above so you conveniently just open the website with your phone. Link: https://tristanpinzari.github.io/Debugging/
Here are some screenshots from my phone from the website above: how i want it is how i want it to be
Note: I did all this with React but I don't think that has any part in this. Heartbreakingly, even deleting the padding from my #about, I am still facing a similar issue-although more text is exposed-in my actual project.
Any help is greatly appreciated.
iduniqueness in your question's snippet? If you did it, is your entire problem solved. Non-uniqueidis a serious problem, it could lead to unexpected behavior.