Anomalie bei Polsterung, Rand und Anzeige

Anonymous · Post by **Anonymous** » 27 Dec 2025, 17:37

Ich habe also ein Div namens highlights, das eine Reihe von Karten enthält. Wenn ich #highlights in ein anderes Div mit dem Namen about einfüge, das für sein CSS nur padding: 5rem 0; (Rand würde den gleichen Effekt haben) hat, wird der Inhalt jeder Karte erheblich gekürzt. Wenn Highlights kein untergeordnetes Element von about ist oder Sie das CSS von about entfernen, kapseln die Karten ihren Inhalt vollständig. Diese Anomalie ist meines Wissens nur auf Mobilgeräten sichtbar. Ich habe dieses Problem überhaupt nicht auf meinem Laptop und auch nicht, wenn ich den Auflösungssimulator von Chrome verwende, um zu testen, wie meine Website in verschiedenen Auflösungen aussehen würde. Als ich jedoch mit meinem IPhone 14 Pro überprüfte, wurde der gesamte Inhalt meiner Karten abgeschnitten, obwohl auf meinem Laptop mit derselben Auflösung alles in Ordnung war.
Der folgende Code veranschaulicht das Problem. Die erste Hervorhebung befindet sich unter about und die zweite about ist ein direktes untergeordnetes Element von body.

Code: Select all

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

Code: Select all










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.

Wie ich bereits sagte, scheint dies nur auf dem Telefon sichtbar zu sein. Während ich Stunden damit verbracht habe, dies herauszufinden, habe ich das obige Beispiel gehostet, sodass Sie die Website bequem einfach mit Ihrem Telefon öffnen können. Link: https://tristanpinzari.github.io/Debugging/
Hier sind einige Screenshots von meinem Telefon von der Website oben: Wie ich es möchte, ist, wie ich es haben möchte
Hinweis: Ich habe das alles mit React gemacht, aber ich glaube nicht, dass das irgendeine Rolle dabei spielt. Es ist herzzerreißend, dass ich in meinem eigentlichen Projekt immer noch mit einem ähnlichen Problem konfrontiert bin, selbst wenn ich die Füllung aus meinem #about lösche – obwohl mehr Text angezeigt wird.
Jede Hilfe wird sehr geschätzt.

Anomalie bei Polsterung, Rand und Anzeige

Anomalie bei Polsterung, Rand und Anzeige ⇐ HTML

Quick Reply