castad/o2o-castad-frontend
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 진입 화면 로고가 폼 열 밖으로 넘치지 않게 한다

Browse Source 
화면이 커질수록 로고를 350 → 400 → 500 → 554px 로 키우고 있었는데,
정작 아래 폼 열은 375px 고정이라 데스크톱에서 로고만 좌우로 90px 씩
삐져나왔다. 로고가 탭·입력과 축이 맞지 않아 화면이 불안정해 보인다.

브레이크포인트 4단을 지우고 `width: min(100%, 280px)` 하나로 바꾼다.
열 폭과 상한을 동시에 걸어 어느 화면 폭에서도 열을 넘지 않는다 —
나중에 브레이크포인트를 손대도 다시 어긋나지 않는다.

로고 아래 여백도 16 → 20px 으로 올려 "묶음 사이" 간격 체계에 맞춘다.

측정: 1280px 화면 로고 280 / 열 375, 375px 화면 로고 280 / 열 343 — 양쪽 다 포함.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Haewon Kam 2026-08-20 15:01:29 +09:00
parent 40895207ee
commit efc6e45070
1 changed files with 9 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/generation-flow.css
View File

@ -2582,33 +2582,21 @@
} }
.url-input-logo { .url-input-logo {
margin-bottom: 1rem; /* 로고 → 탭은 "묶음 사이" 간격 (generation-flow.css 상단 간격 체계 참조) */
margin-bottom: 20px;
} }
/* 로고는 **아래 폼 열보다 넓어질 수 없다.**
이전에는 화면이 커질수록 350 → 400 → 500 → 554px 로 키웠는데, 정작 폼 열은
375px 로 고정이라 데스크톱에서 로고만 좌우로 90px 씩 삐져나왔다.
min() 으로 열 폭과 상한을 동시에 걸면 어느 폭에서도 넘지 않는다 —
브레이크포인트를 늘려도 다시 어긋날 일이 없다. */
.url-input-logo img { .url-input-logo img {
width: 350px; display: block;
max-width: 100%; width: min(100%, 280px);
height: auto; height: auto;
} }
@media (min-width: 640px) {
.url-input-logo img {
width: 400px;
}
}
@media (min-width: 768px) {
.url-input-logo img {
width: 500px;
}
}
@media (min-width: 1024px) {
.url-input-logo img {
width: 554px;
}
}
.url-input-title { .url-input-title {
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
font-size: 40px; font-size: 40px;