안녕하세요,
콘택트폼을 모바일에서 최적화시키면서 css 수정하고있습니다.
style.css파일에 다행이 모바일 뷰로 할때가 지정되어있어서 훨씬 작업이 편리했습니다.
이미지에서 보시면 똑같이 적용했다고 생각했는데, 제목부분만 attr-value 부분사이즈가 다른거같습니다.
인풋박스 사이즈를 동일하게 맞추고싶습니다.
@media screen and (max-width:600px) {
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-author {
width: 100%
}
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-text {
float: left;
width: 100%
}
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-title {
width: 100%;
background-color: red;
}
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-title .attr-name {
float: left;
width: 25%;
line-height: 34px;
float: left;
color: #424242;
font-size: 14px;
font-weight: bold
}
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-title .attr-value {
display: block;
width: 70%;
float: left;
}
#kboard-contact-form-editor .kboard-attr-row {
float: left;
width: 100%;
background-color:aqua;
}
#kboard-contact-form-editor .kboard-attr-row .attr-name {
float: left;
width: 25%;
line-height: 34px;
float: left;
color: #424242;
font-size: 14px;
font-weight: bold
}
#kboard-contact-form-editor textarea {
display: inline;
margin: 0;
font-size: 14px;
width: 70%;
min-width: 70%;
max-width: 70%;
height: 250px;
min-height: 0;
color: #424242;
border-radius: 4px;
border: 1px solid #dcdcdc;
box-shadow: none;
background: none;
background-color: #fff;
box-sizing: border-box;
vertical-align: top;
text-indent: 0
}
#kboard-contact-form-editor .kboard-control .left {
margin-left: 40%
}
#kboard-contact-form-list .kboard-category.category-mobile {
display: block
}
#kboard-contact-form-list .kboard-category.category-pc {
display: none
}
#kboard-contact-form-list .kboard-tree-category-search .kboard-search-option-wrap.select {
width: 100%
}
#kboard-contact-form-list .kboard-list table {
border-top: 1px solid #f1f1f1
}
#kboard-contact-form-list .kboard-list table thead {
display: none
}
#kboard-contact-form-list .kboard-list table td.kboard-list-title {
padding: 10px 5px
}
#kboard-contact-form-list .kboard-list table td.kboard-list-title .kboard-contact-form-cut-strings {
margin-bottom: 10px;
white-space: normal;
font-size: 15px;
line-height: 23px
}
#kboard-contact-form-list .kboard-list table td.kboard-list-uid, #kboard-contact-form-list .kboard-list table td.kboard-list-user, #kboard-contact-form-list .kboard-list table td.kboard-list-date, #kboard-contact-form-list .kboard-list table td.kboard-list-vote, #kboard-contact-form-list .kboard-list table td.kboard-list-view {
display: none
}
#kboard-contact-form-list .kboard-list .kboard-mobile-contents {
display: block
}
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li {
display: none
}
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.first-page, #kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.last-page, #kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.prev-page, #kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.next-page, #kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.active {
display: inline-block
}
#kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.prev-page a, #kboard-contact-form-list .kboard-pagination .kboard-pagination-pages li.next-page a {
padding: 0 18px
}
#kboard-contact-form-list .kboard-search select {
float: left;
margin-right: 1%;
width: 29%;
min-width: 29%;
height: 28px;
line-height: 28px;
box-sizing: border-box
}
#kboard-contact-form-list .kboard-search input {
float: left;
margin-right: 1%;
width: 49%;
min-width: 49%;
height: 28px;
line-height: 28px;
box-sizing: border-box
}
#kboard-contact-form-list .kboard-search button {
float: left;
width: 20%;
min-width: 20%;
box-sizing: border-box
}
#kboard-contact-form-editor select, #kboard-contact-form-editor input[type="text"], #kboard-contact-form-editor input[type="email"], #kboard-contact-form-editor input[type="number"], #kboard-contact-form-editor input[type="date"], #kboard-contact-form-editor input[type="password"], #kboard-contact-form-editor input[type="file"] {
width: 70%;
box-sizing: border-box
}
#kboard-contact-form-editor .kboard-attr-row {
padding: 10px 0
}
어떤 부분을 잘못된 것일까요?
안녕하세요~^^
KBoard 플러그인 컨택트폼(Contact Form) 모바일 글쓰기 페이지에서
제목 입력 필드의 너비만 다르게 보이는 이유는 별도로 제목 쪽에만 CSS를 적용해주신 듯합니다.
올려주신 코드 중에서
아래의 코드를 지우신 후에 확인해보시겠어요?
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-title .attr-value { display: block; width: 70%; float: left; }
고맙습니다.
감사합니다 해결했습니다^^