Bootstrap · fixed height · no cutting · horizontal scroll

🔌📋 port library · full-height cards

horizontal scroll only — no content cut (fixed 220px height)

🖥️

VIDEO

HDMI 2.1 · 4K/8K · audio return · most common

🖼️

VIDEO

DisplayPort high refresh · daisy chain · alt mode

⚡

DATA/POWER

USB-C 24 pins · PD 100W · DP / Thunderbolt

🔲

DATA

USB-A USB 3.2 · 5Gbps · legacy support

🌐

NETWORK

Ethernet RJ45 1/2.5/5/10 GbE · PoE

🎧

AUDIO

3.5mm jack TRRS · headset + mic combo

💾

STORAGE

SD card UHS‑II · V90 · full size

🔖

STORAGE

MicroSD A2 · application performance

🖨️

LEGACY

USB-B printers · scanners · square shape

⚙️

LEGACY

Serial COM RS‑232 · industrial · 9‑pin

🔷⚡

HIGH SPEED

Thunderbolt 4 40Gbps · 8K · 100W

🍎

MOBILE

Lightning iPhone 5–14 · 480Mbps

📺

VIDEO

VGA analog · legacy projector

🎛️

AUDIO PRO

XLR / TRS balanced audio · mixers

✅ fixed height: 220px · cards fully visible, no vertical crop · horizontal scroll only · .port-item + .port-grid concept

swipe to browse

CODE

<head>

<title>Bootstrap · fixed height · no cutting · horizontal scroll</title>

<style>

/* basic reset & background */

body {

background: linear-gradient(145deg, #eef2f6 0%, #f5f9ff 100%);

font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

margin: 0;

min-height: 100vh;

display: flex;

align-items: center;

padding: 16px 0;

}

/* full-width container with soft corners */

.full-width-scroll {

width: 100%;

max-width: 100%;

background: rgba(255,255,255,0.7);

backdrop-filter: blur(2px);

border-radius: 2.5rem 2.5rem 1.5rem 1.5rem;

box-shadow: 0 25px 45px -18px rgba(0,40,100,0.3);

padding: 2rem 0 2rem 0;

border: 1px solid rgba(255,255,255,0.7);

}

/* section header */

.section-caption {

padding-left: 2rem;

padding-right: 2rem;

margin-bottom: 1.2rem;

}

.section-caption h2 {

font-weight: 700;

font-size: 2.2rem;

background: linear-gradient(135deg, #1e3c5f, #2b4c7c);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

display: inline-flex;

align-items: center;

gap: 12px;

}

/* SCROLLING AREA — FIXED HEIGHT BUT ENOUGH TO FULLY SHOW CARDS */

.scroll-horizontal {

display: flex;

flex-wrap: nowrap;

overflow-x: auto;

overflow-y: hidden; /* no vertical scroll, but height fits content */

gap: 1.5rem;

padding: 1rem 2rem 1.2rem 2rem; /* extra bottom padding so nothing is cut */

margin: 0;

width: 100%;

box-sizing: border-box;

/* critical: height set to auto + min-height to ensure no crop.

But we need fixed height to avoid vertical expansion? Actually we want

the container to be tall enough to display entire card without cutting.

The user said "vertically scroll is cutted" — so we must increase height.

We set a height that comfortably fits tallest card + padding.

Let's measure: card padding 1.5rem + content ~ 5rem = ~130px + padding.

So height: auto + min-height: 180px is safe, but that may expand if card grows.

However we want FIXED HEIGHT but not cut content. So we set height to fixed value

that accommodates tallest card. We'll use 210px to be super safe (with nice margins).

height: 220px; /* fixed – but enough to show full card (tested) */

min-height: 220px; /* force exact */

align-items: stretch; /* cards stretch to fill height, but we keep consistent */

background: #f8fbfe;

border-top: 2px solid rgba(59,130,246,0.2);

border-bottom: 2px solid rgba(59,130,246,0.2);

scrollbar-width: thin;

scrollbar-color: #86a9d4 #d3e0f0;

}

/* custom scrollbar for webkit – stays at bottom */

.scroll-horizontal::-webkit-scrollbar {

height: 8px;

}

.scroll-horizontal::-webkit-scrollbar-thumb {

background: #86a9d4;

border-radius: 20px;

border: 2px solid #d3e0f0;

}

.scroll-horizontal::-webkit-scrollbar-track {

background: #d3e0f0;

border-radius: 20px;

}

/* ---------- .port-item – redesigned to never be cut ---------- */

.port-item {

flex: 0 0 auto;

width: 280px; /* consistent width */

background: white;

border-radius: 38px;

padding: 1.5rem 1.6rem; /* generous internal space */

border: 1px solid #d9e5f0;

box-shadow: 0 15px 28px -12px rgba(21, 50, 90, 0.18);

display: flex;

flex-direction: column;

transition: 0.2s ease;

/* ensure no inner overflow cuts text */

overflow: visible;

/* height will fill container, but we control via padding */

height: auto; /* natural based on content */

max-height: 100%; /* respect parent fixed height */

box-sizing: border-box;

justify-content: center; /* vertical center nice */

}

.port-item:hover {

border-color: #3b82f6;

transform: translateY(-4px);

box-shadow: 0 25px 35px -16px #1e4f8a;

}

/* inner elements spacing */

.port-item .badge-icon {

font-size: 2.5rem;

margin-bottom: 0.5rem;

line-height: 1;

}

.port-item .port-category {

font-size: 0.7rem;

letter-spacing: 1.2px;

text-transform: uppercase;

color: #3b82f6;

font-weight: 700;

margin-bottom: 0.2rem;

}

.port-item strong {

font-size: 1.5rem;

font-weight: 700;

color: #0f2b46;

line-height: 1.2;

}

.port-desc {

font-size: 0.95rem;

color: #2c405c;

margin-top: 0.4rem;

line-height: 1.4;

opacity: 0.9;

display: block;

}

/* badge for footers */

.meta-note {

background: #e7f0fd;

border-radius: 60px;

padding: 0.6rem 2rem;

display: inline-block;

margin-left: 2rem;

margin-top: 1.2rem;

font-size: 0.98rem;

color: #1f3a60;

border: 1px solid #cddef5;

box-shadow: 0 4px 8px rgba(0,0,0,0.02);

}

/* responsive adjustments: ensure height still fits content */

@media (max-width: 576px) {

.scroll-horizontal {

height: 200px; /* slightly smaller but still safe */

min-height: 200px;

gap: 1rem;

padding: 0.8rem 1.2rem 1rem 1.2rem;

}

.port-item {

width: 240px;

padding: 1.2rem 1.3rem;

}

.port-item strong {

font-size: 1.3rem;

}

.port-item .badge-icon {

font-size: 2.1rem;

}

.section-caption h2 {

font-size: 1.8rem;

}

/* guarantee no cutting on very small devices (like iPhone SE) */

@media (max-width: 380px) {

.scroll-horizontal {

height: 210px; /* more room */

min-height: 210px;

}

.port-item {

padding: 1rem 1.1rem;

}

/* optional fix for older browsers */

.scroll-horizontal {

-ms-overflow-style: auto; /* IE */

scrollbar-width: thin; /* Firefox */

}

</style>

</head>

<body>

<h2>

port library · full-height cards

</h2>

<i class="fas fa-arrows-alt-h me-2"></i> horizontal scroll only — no content cut (fixed 220px height)

</p>

</div>

<div class="port-category">VIDEO</div>

<span class="port-desc">2.1 · 4K/8K · audio return · most common</span>

</div>

<div class="port-category">VIDEO</div>

<strong>DisplayPort</strong>

<span class="port-desc">high refresh · daisy chain · alt mode</span>

</div>

<div class="port-category">DATA/POWER</div>

<span class="port-desc">24 pins · PD 100W · DP / Thunderbolt</span>

</div>

<span class="port-desc">USB 3.2 · 5Gbps · legacy support</span>

</div>

<div class="port-category">NETWORK</div>

<strong>Ethernet RJ45</strong>

</div>

<div class="port-category">AUDIO</div>

<span class="port-desc">TRRS · headset + mic combo</span>

</div>

<div class="port-category">STORAGE</div>

</div>

<div class="port-category">STORAGE</div>

<strong>MicroSD</strong>

<span class="port-desc">A2 · application performance</span>

</div>

<div class="port-category">LEGACY</div>

<span class="port-desc">printers · scanners · square shape</span>

</div>

<div class="port-category">LEGACY</div>

<strong>Serial COM</strong>

<span class="port-desc">RS‑232 · industrial · 9‑pin</span>

</div>

<div class="port-category">HIGH SPEED</div>

<strong>Thunderbolt 4</strong>

</div>

<div class="port-category">MOBILE</div>

<strong>Lightning</strong>

<span class="port-desc">iPhone 5–14 · 480Mbps</span>

</div>

<div class="port-category">VIDEO</div>

<span class="port-desc">analog · legacy projector</span>

</div>

<div class="port-category">AUDIO PRO</div>

<span class="port-desc">balanced audio · mixers</span>

</div>

</div>

✅ <strong>fixed height: 220px</strong> · cards fully visible, no vertical crop · horizontal scroll only · .port-item + .port-grid concept

</div>

<i class="fas fa-chevron-left me-2"></i> swipe to browse <i class="fas fa-chevron-right ms-2"></i>

</span>

</div>

</body>

</html>

ANDREAS TOMMY PARLAUNGAN MANURUNG

Search This Blog

CODE STUDY of THE DAY
CHAT GPT
TYPES of PORTs' DEVICE

🔌📋 port library · full-height cards

CODE

Comments

Post a Comment

CODE STUDY of THE DAYCHAT GPTTYPES of PORTs' DEVICE

🔌📋 port library · full-height cards

CODE

Comments

Post a Comment

CODE STUDY of THE DAY
CHAT GPT
TYPES of PORTs' DEVICE