codestates / codestates/Lollin-client

[Correct] Item DB와 Champ DB css 수정사항

Open
#69 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
0
Forks
0
PR merge metrics
No merged PRs in 30d

Description

# Item DB
```js
export const ItemTitle = styled.span`
margin-top: 75px; -> margin-top 수정
color: #cfa85c;
font-size: 2rem;
font-weight: bold;
`;
```

# Champ DB
```js
export const ChampDbTiltle = styled.span`
margin-top: 5rem; -> margin-top을 수정
font-size: 5rem;
font-weight: bold;
color: white;
transition: font-size 0.5s;

@media (min-width: 320px) and (max-width: 530px) {
font-size: 3rem;
transition: font-size 0.5s;
}
`;
```

```js
export const ChampSearchArea = styled.div`
display: flex;
background-color: white;
margin-top: 25px;

.champSearchForm {
position: relative;
width: 280px;
max-width: 250px;
border-radius: 2px;
background-color: #fff;
}
.champSearchInput {
display: block;
width: 100%;
padding: 10px 10px 10px 10px;
background: none;
border: none;
line-height: 17px;
font-size: 0.75rem; -> font-size 변경
color: #575757;
box-sizing: border-box;
outline: none;
box-shadow: 1.5px 2.5px 0.9px 1px #ffc4006e;

&:focus::-webkit-input-placeholder {
font-size: 0.5rem;
color: white;
}
}

.champSearchBtn {
display: flex;
position: absolute;
top: 0;
right: 0;
margin-right: 5px;
margin-top: 4px;
padding: 5px 7.5px; -> padding 변경
border: none;
background-color: #ffbb00;
border-radius: 2px;
color: white;
font-weight: bold;
transition: background-color 0.4s;

&:hover {
background-color: #c99300;
transition: background-color 0.4s;
}
}
`;
```
```js
export const Wrapper = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
background-color: #000000ce;
z-index: 3;

@media (min-width: 320px) and (max-width: 530px) {
margin-right: 15px;
} -> 화면크기 축소시 양쪽 간격맞춤
`;
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Locate the styled components ItemTitle, ChampDbTiltle, ChampSearchArea, and Wrapper, then inspect the Item DB and Champ DB layouts at desktop and narrow screen sizes. Apply the requested CSS corrections for margins, font size, button padding, and mobile spacing; the issue does not specify the replacement values, so confirm the intended appearance before starting.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
design, frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.