codestates / codestates/Lollin-client
[Correct] Item DB와 Champ DB css 수정사항
- 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