양 옆 공백.. 밑에 공백없이 모바일 틀에 딱맞게...

양 옆 공백.. 밑에 공백없이 모바일 틀에 딱맞게...

QA

양 옆 공백.. 밑에 공백없이 모바일 틀에 딱맞게...

본문

안녕하세요!! 이거 문의좀 드릴게요..

모바일에서 주문서

주문서 이걸 클릭하면... 딱 맞게 나오지 않고..

 

239030541_1523946873.0407.png

 

이렇게 양 옆 공백.. 밑에 공백이 생겨요.. 딱 맞게 떨어지면 좋을텐데...

아래 css만 수정할수있는데. 어느 부분을 고쳐야할지 모르겠어요 ㅠㅠ 

 

 

아래는 ..해당 스타일시트 입니다..

 

 

 

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

@charset "utf-8";

@import url('/css/nanumgothic.css');

@import url('skin_common.css');

 

/* Global */


 

/* Layout */

 

body {

    background: #ffffff;

    padding: 0 0 0 0px;

    margin: 0 0 0 0px;

}

 

body, table, div, p {

    font-family: 'Nanum Gothic';

}

#header {

    background-repeat: repeat-x;

    padding: 0 0 0px 0;

    height: 175px;

    width: 100%;

    border: 0px;

    margin: 0 auto;

}

#category {

    font-weight: bold;

    font-size: 21px;

    height: 41px;

    width: 100%;

    margin: 0 auto;

    padding: 35px 0px 0px 0px;

    background-image: url("/img/bullet_ico_blue.gif");

    background-repeat: no-repeat;

    background-position: 0.2% 65%

}

#contents {

    width: 100%;

    margin: 0 auto;

}

table {

    border-spacing:0px;

    width: 100%

}

table, td, th {

    text-align: left;

    border-collapse: collapse;

    vertical-align: middle;

    margin: 0;

}

.td_title {

    font-weight: bold;

    color: #383737;

    background-color: #f3fafe;

    padding: 0 20px;

    height: 55px;

    font-weight: bold;

    color: #383737;

    background-color: #f3fafe;

}

.td_contents {

    color: #888888;

    height: 55px;

    padding-left: 20px;

}

 

.dotted_border {

    border-color: #dfdfe1;

    border-style: solid;

    border-width: 1px;

    border-top-style: none;

    border-left-style: none;

    border-right-style: none;

    border-bottom-style: dotted;

}

 

.b_border {

    border-color: #626470;

    border-style: solid;

    border-width: 1px;

    border-left-style: none;

    border-right-style: none;

    border-bottom-style: dotted;

    border-bottom-color: #dfdfe1;

}

.table_txt {

    font-size: 12px;

    font-color: #f9f9f9;

    font-weight: normal;

    padding-top: 20px;

    padding-right: 15px;

}

.table_txt_2 {

    font-size: 12px;

    font-color: #f9f9f9;

    font-weight: normal;

    padding-top: 15px;

}

.notice {

    float: right;

    font-size: 12px;

    font-color: #f9f9f9;

    font-weight: normal;

    padding-right: 20px;

}

.form-control::-moz-placeholder, .select2-search input[type="text"]::-moz-placeholder {

color: #b2bcc5;

opacity: 1;

}

.form-control:-ms-input-placeholder, .select2-search input[type="text"]:-ms-input-placeholder {

color: #b2bcc5;

}

.form-control::-webkit-input-placeholder, .select2-search input[type="text"]::-webkit-input-placeholder {

color: #b2bcc5;

}

.form-control, .select2-search input[type="text"] {

    height: 42px;

    padding: 8px 12px;

    font-size: 15px;

    line-height: 1.467;

    color: #888888;

    border: 2px solid #dee1e3;

    border-radius: 6px;

    box-shadow: none;

    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;

    transition: border .25s linear, color .25s linear, background-color .25s linear;

}

.form-group.focus .form-control, .form-control:focus, .form-group.focus .select2-search input[type="text"], .select2-search input[type="text"]:focus {

    border-color: #5dade2;

    outline: 0;

    box-shadow: none;

}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control, .select2-search input[type="text"][disabled], .select2-search input[type="text"][readonly], fieldset[disabled] .select2-search input[type="text"] {

    color: #888888;

    cursor: default;

    background-color: #f4f6f6;

    filter: alpha(opacity=70);

    border-color: #d5dbdb;

    opacity: .7;

}

.form-control.flat, .select2-search input[type="text"].flat {

    border-color: transparent;

}

.form-control.flat:hover, .select2-search input[type="text"].flat:hover {

    border-color: #bdc3c7;

}

.form-control.flat:focus, .select2-search input[type="text"].flat:focus {

    border-color: #5dade2;

}

.input-sm, .form-group-sm .form-control, .form-group-sm .select2-search input[type="text"], .select2-search input[type="text"] {

    height: 25px;

    padding: 6px 10px;

    font-size: 13px;

    line-height: 1.462;

    border-radius: 6px;

}

.input-sm, .form-group-sm .form-control, .form-group-sm .select2-search input[type="file"], .select2-search input[type="file"] {

    background-color: #FFFFFF;

}

select.input-sm, select.form-group-sm .form-control, select.form-group-sm .select2-search input[type="text"], select.select2-search input[type="text"] {

    height: 35px;

    line-height: 35px;

}

select.input-sm, select.form-group-sm .form-control, select.form-group-sm .select2-search input[type="file"], select.select2-search input[type="file"] {

    background-color: #FFFFFF;

}

textarea.input-sm, textarea.form-group-sm .form-control, select[multiple].input-sm, select[multiple].form-group-sm .form-control, textarea.form-group-sm .select2-search input[type="text"], select[multiple].form-group-sm .select2-search input[type="text"], textarea.select2-search input[type="text"], select[multiple].select2-search input[type="text"] {

    height: auto;

}

.input-lg, .form-group-lg .form-control, .form-group-lg .select2-search input[type="text"] {

    height: 45px;

    padding: 10px 15px;

    /*font-size: 17px;*/

    line-height: 1.235;

    border-radius: 6px;

}

select.input-lg, select.form-group-lg .form-control, select.form-group-lg .select2-search input[type="text"] {

    height: 45px;

    line-height: 45px;

}

textarea.input-lg, textarea.form-group-lg .form-control, select[multiple].input-lg, select[multiple].form-group-lg .form-control, textarea.form-group-lg .select2-search input[type="text"], select[multiple].form-group-lg .select2-search input[type="text"] {

    height: auto;

}

.input-hg, .form-group-hg .form-control, .form-horizontal .form-group-hg .form-control, .form-group-hg .select2-search input[type="text"], .form-horizontal .form-group-hg .select2-search input[type="text"] {

    height: 53px;

    padding: 10px 16px;

    font-size: 22px;

    line-height: 1.318;

    border-radius: 6px;

}

select.input-hg, select.form-group-hg .form-control, select.form-group-hg .select2-search input[type="text"] {

    height: 53px;

    line-height: 53px;

}

textarea.input-hg, textarea.form-group-hg .form-control, select[multiple].input-hg, select[multiple].form-group-hg .form-control, textarea.form-group-hg .select2-search input[type="text"], .btn {

    padding: 10px 15px;

    font-size: 15px;

    font-weight: normal;

    line-height: 1.4;

    border: none;

    border-radius: 4px;

    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;

    transition: border .25s linear, color .25s linear, background-color .25s linear;

    -webkit-font-smoothing: subpixel-antialiased;

}

.btn:hover, .btn:focus {

    color: #fff;

    outline: none;

}

.btn:active, .btn.active {

    outline: none;

    box-shadow: none;

}

.btn:focus:active {

    outline: none;

}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {

    color: rgba(255, 255, 255, .75);

    cursor: not-allowed;

    background-color: #bdc3c7;

    filter: alpha(opacity=70);

    opacity: .7;

}

.btn [class^="fui-"] {

    position: relative;

    top: 1px;

    margin: 0 1px;

    line-height: 1;

}

.btn-default {

    color: #fff;

    background-color: #bdc3c7;

    padding: 10px 20px;

    font-size: 17px;

    line-height: 1.5;

    border-radius: 6px;

    white-space: normal;

}

.btn-default:hover, .btn-default.hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {

    color: #fff;

    background-color: #cacfd2;

    border-color: #cacfd2;

    padding: 10px 20px;

    font-size: 17px;

    line-height: 1.5;

    border-radius: 6px;

    white-space: normal;

}

.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {

    background: #a1a6a9;

    border-color: #a1a6a9;

    padding: 10px 20px;

    font-size: 17px;

    line-height: 1.5;

    border-radius: 6px;

    white-space: normal;

}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled.hover, .btn-default[disabled].hover, fieldset[disabled] .btn-default.hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active {

    background-color: #bdc3c7;

    border-color: #bdc3c7;

    padding: 10px 20px;

    font-size: 17px;

    line-height: 1.5;

    border-radius: 6px;

    white-space: normal;

}

.btn-info {

    color: #fff;

    background-color: #3498db;

    padding: 10px 20px;

    font-size: 14px;

    line-height: 1.5;

    border-radius: 5px;

    white-space: normal;

}

.btn-info:hover, .btn-info.hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {

    color: #fff;

    background-color: #5dade2;

    border-color: #5dade2;

    padding: 10px 20px;

    font-size: 14px;

    line-height: 1.5;

    border-radius: 5px;

}

.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {

    background: #2980b9;

    border-color: #2980b9;

}

.btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled.hover, .btn-info[disabled].hover, fieldset[disabled] .btn-info.hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active {

    background-color: #bdc3c7;

    border-color: #3498db;

}

.btn-link {

    color: #16a085;

}

.btn-link:hover, .btn-link:focus {

    color: #1abc9c;

    text-decoration: underline;

    background-color: transparent;

}

.btn-link[disabled]:hover, fieldset[disabled] .btn-link:hover, .btn-link[disabled]:focus, fieldset[disabled] .btn-link:focus {

    color: #bdc3c7;

    text-decoration: none;

}

.btn-hg, .btn-group-hg > .btn {

    padding: 13px 20px;

    font-size: 22px;

    line-height: 1.227;

    border-radius: 6px;

}

*//*! normalize.css v3.0.1 | MIT License | git.io/normalize */

.col-xs-3, {

position:relative;

min-height:1px;

padding-right:15px;

padding-left:15px width: 66.66666667%

}

.checkbox, .radio {

    position: relative;

    padding-left: 0px;

    margin-bottom: 12px;

    font-size: 14px;

    line-height: 1.5;

    -webkit-transition: color .25s linear;

    transition: color .25s linear;

}

.checkbox .icons, .radio .icons {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    width: 20px;

    height: 20px;

    font-size: 20px;

    line-height: 20px;

    color: #bdc3c7;

    text-align: center;

    cursor: pointer;

}

.checkbox .icons .icon-checked, .radio .icons .icon-checked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox .icon-checked, .radio .icon-checked, .checkbox .icon-unchecked, .radio .icon-unchecked {

    position: absolute;

    top: 0;

    left: 0;

    display: inline-table;

    margin: 0;

    background-color: transparent;

    filter: none;

    opacity: 1;

    -webkit-transition: color .25s linear;

    transition: color .25s linear;

    -webkit-filter: none;

}

.checkbox .icon-checked:before, .radio .icon-checked:before, .checkbox .icon-unchecked:before, .radio .icon-unchecked:before {

    font-family: 'Flat-UI-Icons';

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    speak: none;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

.checkbox .icon-checked:before {

    content: "\e60e";

}

.checkbox .icon-unchecked:before {

    content: "\e60d";

}

.radio .icon-checked:before {

    content: "\e60c";

}

.radio .icon-unchecked:before {

    content: "\e60b";

}

.checkbox input[type="checkbox"].custom-checkbox, .radio input[type="checkbox"].custom-checkbox, .checkbox input[type="radio"].custom-radio, .radio input[type="radio"].custom-radio {

    position: absolute;

    top: 0;

    left: 0;

    width: 20px;

    height: 20px;

    padding: 0;

    margin: 0;

    outline: none !important;

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:hover:not(.nohover):not(:disabled) + .icons .icon-unchecked, .radio input[type="checkbox"].custom-checkbox:hover:not(.nohover):not(:disabled) + .icons .icon-unchecked, .checkbox input[type="radio"].custom-radio:hover:not(.nohover):not(:disabled) + .icons .icon-unchecked, .radio input[type="radio"].custom-radio:hover:not(.nohover):not(:disabled) + .icons .icon-unchecked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:hover:not(.nohover):not(:disabled) + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:hover:not(.nohover):not(:disabled) + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:hover:not(.nohover):not(:disabled) + .icons .icon-checked, .radio input[type="radio"].custom-radio:hover:not(.nohover):not(:disabled) + .icons .icon-checked {

    filter: none;

    opacity: 1;

    -webkit-filter: none;

}

.checkbox input[type="checkbox"].custom-checkbox:checked + .icons, .radio input[type="checkbox"].custom-checkbox:checked + .icons, .checkbox input[type="radio"].custom-radio:checked + .icons, .radio input[type="radio"].custom-radio:checked + .icons {

    color: #1abc9c;

}

.checkbox input[type="checkbox"].custom-checkbox:checked + .icons .icon-unchecked, .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-unchecked, .checkbox input[type="radio"].custom-radio:checked + .icons .icon-unchecked, .radio input[type="radio"].custom-radio:checked + .icons .icon-unchecked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:checked + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:checked + .icons .icon-checked, .radio input[type="radio"].custom-radio:checked + .icons .icon-checked {

    color: #1abc9c;

    filter: none;

    opacity: 1;

    -webkit-filter: none;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled + .icons, .radio input[type="checkbox"].custom-checkbox:disabled + .icons, .checkbox input[type="radio"].custom-radio:disabled + .icons, .radio input[type="radio"].custom-radio:disabled + .icons {

    color: #e6e8ea;

    cursor: default;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled + .icons .icon-unchecked, .radio input[type="checkbox"].custom-checkbox:disabled + .icons .icon-unchecked, .checkbox input[type="radio"].custom-radio:disabled + .icons .icon-unchecked, .radio input[type="radio"].custom-radio:disabled + .icons .icon-unchecked {

    filter: none;

    opacity: 1;

    -webkit-filter: none;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:disabled + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:disabled + .icons .icon-checked, .radio input[type="radio"].custom-radio:disabled + .icons .icon-checked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled:checked + .icons, .radio input[type="checkbox"].custom-checkbox:disabled:checked + .icons, .checkbox input[type="radio"].custom-radio:disabled:checked + .icons, .radio input[type="radio"].custom-radio:disabled:checked + .icons {

    color: #e6e8ea;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled:checked + .icons .icon-unchecked, .radio input[type="checkbox"].custom-checkbox:disabled:checked + .icons .icon-unchecked, .checkbox input[type="radio"].custom-radio:disabled:checked + .icons .icon-unchecked, .radio input[type="radio"].custom-radio:disabled:checked + .icons .icon-unchecked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:disabled:checked + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:disabled:checked + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:disabled:checked + .icons .icon-checked, .radio input[type="radio"].custom-radio:disabled:checked + .icons .icon-checked {

    color: #e6e8ea;

    filter: none;

    opacity: 1;

    -webkit-filter: none;

}

.checkbox input[type="checkbox"].custom-checkbox:indeterminate + .icons, .radio input[type="checkbox"].custom-checkbox:indeterminate + .icons, .checkbox input[type="radio"].custom-radio:indeterminate + .icons, .radio input[type="radio"].custom-radio:indeterminate + .icons {

    color: #bdc3c7;

}

.checkbox input[type="checkbox"].custom-checkbox:indeterminate + .icons .icon-unchecked, .radio input[type="checkbox"].custom-checkbox:indeterminate + .icons .icon-unchecked, .checkbox input[type="radio"].custom-radio:indeterminate + .icons .icon-unchecked, .radio input[type="radio"].custom-radio:indeterminate + .icons .icon-unchecked {

    filter: none;

    opacity: 1;

    -webkit-filter: none;

}

.checkbox input[type="checkbox"].custom-checkbox:indeterminate + .icons .icon-checked, .radio input[type="checkbox"].custom-checkbox:indeterminate + .icons .icon-checked, .checkbox input[type="radio"].custom-radio:indeterminate + .icons .icon-checked, .radio input[type="radio"].custom-radio:indeterminate + .icons .icon-checked {

    filter: alpha(opacity=0);

    opacity: 0;

}

.checkbox input[type="checkbox"].custom-checkbox:indeterminate + .icons:before, .radio input[type="checkbox"].custom-checkbox:indeterminate + .icons:before, .checkbox input[type="radio"].custom-radio:indeterminate + .icons:before, .radio input[type="radio"].custom-radio:indeterminate + .icons:before {

    position: absolute;

    top: 0;

    left: 0;

    z-index: 10;

    font-size: 22px;

    line-height: 20px;

    color: #fff;

    text-align: center;

    content: "\2013";

}

.checkbox.primary input[type="checkbox"].custom-checkbox + .icons, .radio.primary input[type="checkbox"].custom-checkbox + .icons, .checkbox.primary input[type="radio"].custom-radio + .icons, .radio.primary input[type="radio"].custom-radio + .icons {

    color: #34495e;

}

.checkbox.primary input[type="checkbox"].custom-checkbox:checked + .icons, .radio.primary input[type="checkbox"].custom-checkbox:checked + .icons, .checkbox.primary input[type="radio"].custom-radio:checked + .icons, .radio.primary input[type="radio"].custom-radio:checked + .icons {

    color: #1abc9c;

}

.checkbox.primary input[type="checkbox"].custom-checkbox:disabled + .icons, .radio.primary input[type="checkbox"].custom-checkbox:disabled + .icons, .checkbox.primary input[type="radio"].custom-radio:disabled + .icons, .radio.primary input[type="radio"].custom-radio:disabled + .icons {

    color: #bdc3c7;

    cursor: default;

}

.checkbox.primary input[type="checkbox"].custom-checkbox:disabled + .icons.checked, .radio.primary input[type="checkbox"].custom-checkbox:disabled + .icons.checked, .checkbox.primary input[type="radio"].custom-radio:disabled + .icons.checked, .radio.primary input[type="radio"].custom-radio:disabled + .icons.checked {

    color: #bdc3c7;

}

.checkbox.primary input[type="checkbox"].custom-checkbox:indeterminate + .icons, .radio.primary input[type="checkbox"].custom-checkbox:indeterminate + .icons, .checkbox.primary input[type="radio"].custom-radio:indeterminate + .icons, .radio.primary input[type="radio"].custom-radio:indeterminate + .icons {

    color: #34495e;

}

.radio + .radio, .checkbox + .checkbox {

    margin-top: 10px;

}

.form-inline .checkbox, .form-inline .radio {

    padding-left: 32px;

}

.form_cancel_ok {

    margin: 0 auto;

    width: 330px;

    height: 70px;

    padding-top: 30px;

}

.form_cancel_ok2 {

    margin: 0 auto;

    width: 200px;

    height: 30px;

    padding:15px 0 0 0;

    list-style:none;

}

.form_cancel_ok2 li {float:left;width:50%;}

.fileContainer {

    overflow: hidden;

    position: relative;

}

.fileContainer [type=file] {

    cursor: inherit;

    display: block;

    font-size: 999px;

    filter: alpha(opacity=0);

    min-height: 100%;

    min-width: 100%;

    opacity: 0;

    position: absolute;

    right: 0;

    text-align: right;

    top: 0;

}

.btn-file {

    position: relative;

    overflow: hidden;

}

.btn-file input[type=file] {

    position: absolute;

    top: 0;

    right: 0;

    min-width: 100%;

    min-height: 100%;

    font-size: 100px;

    text-align: right;

    filter: alpha(opacity=0);

    opacity: 0;

    background: red;

    cursor: inherit;

    display: block;

}

input[readonly] {

    background-color: white !important;

    cursor: text !important;

}

 

.pdl30{padding-left:30px;}

    

.orange_star{color:#ff4400;font-weight:bold;}

.blue_star{color:#3498db;font-weight:bold;}

 

#title_text {padding-top:50px;font-size:20px;text-align:center;}

.btn_padding {padding-top:15px;

 

 

 

 

이 질문에 댓글 쓰기 :

답변 8

@media (max-width:1024px) {

#main_body {max-width: auto!important;}

.cl_title {max-width: auto!important;}
.cl_title2 { width:100%!important }

.cl_title2 img { width:100%!important }

 

이거면 될거같은데 ;

    margin: 0 auto;

 

HTML도 같이 올려주셈

.cl_title {max-width: auto!important;}
.cl_title2 { width:100%!important }

 

이거도 추가 

@media (max-width:1024px) {

#main_body {max-width: auto!important;}

.cl_title {max-width: auto!important;}
.cl_title2 { width:auto!important } <--아 죄송 이거임..

.cl_title2 img { width:100%!important }

답변을 작성하시기 전에 로그인 해주세요.
전체 2,629
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT