Аномалия с заполнением, полями и отображением ⇐ Html

[Anonymous]

Итак, у меня есть элемент div с именем Highlights, который содержит кучу карточек. Когда я помещаю #highlights в другой элемент div с именем about, который имеет только отступ: 5rem 0; (поле приведет к такому же эффекту) для его CSS, содержимое каждой карточки значительно обрезается. Если Highlights не является дочерним элементом about или если вы удалите CSS-код about, карточки полностью инкапсулируют свое содержимое. Насколько мне известно, эта аномалия видна только на мобильных устройствах. У меня нет этой проблемы ни на моем ноутбуке, ни когда я использую симулятор разрешения Chrome, чтобы проверить, как мой веб-сайт будет выглядеть в разных разрешениях. Однако, когда я проверил на своем iPhone 14 Pro, содержимое всех моих карточек было обрезано, хотя на моем ноутбуке с тем же разрешением все было нормально.
Приведенный ниже код иллюстрирует проблему. Первое выделение находится под разделом about, а второе — прямым дочерним элементом body.

Код: Выделить всё

/*
Source - https://stackoverflow.com/q/79855646
Posted by Tristan Pinzari, modified by community. See post 'Timeline' for change history
Retrieved 2025-12-27, License - CC BY-SA 4.0
*/

* {
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  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;
}

Код: Выделить всё

SOFTWARE ENGINEERING FELLOW

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.










JUNIOR IT TECHNICIAN

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.










LOGISTICS & OUTREACH EXECUTIVE

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.













SOFTWARE ENGINEERING FELLOW

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.










JUNIOR IT TECHNICIAN

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.










LOGISTICS & OUTREACH EXECUTIVE

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.

Как я уже говорил ранее, похоже, это видно только на телефоне. Потратив часы на то, чтобы разобраться в этом, я разместил приведенный выше пример, чтобы вам было удобно просто открывать веб-сайт на своем телефоне. Ссылка: https://tristanpinzari.github.io/Debugging/
Вот несколько скриншотов с моего телефона с веб-сайта выше: как я хочу, так и хочу
Примечание: я сделал все это с помощью React, но не думаю, что это имеет какое-либо значение в этом. К сожалению, даже удалив отступы из моего #about, я все еще сталкиваюсь с аналогичной проблемой, хотя в моем реальном проекте отображается больше текста.
Любая помощь будет очень признательна.

Подробнее здесь: https://stackoverflow.com/questions/798 ... nd-display