양 옆 공백.. 밑에 공백없이 모바일 틀에 딱맞게...
본문
안녕하세요!! 이거 문의좀 드릴게요..
모바일에서 주문서
주문서 이걸 클릭하면... 딱 맞게 나오지 않고..
이렇게 양 옆 공백.. 밑에 공백이 생겨요.. 딱 맞게 떨어지면 좋을텐데...
아래 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 }
}
이거면 될거같은데 ;
해봤는데 잘안되네요 도움 많이주셨는데 이게 html을 못건드니 어렵네요 ㅠㅠ
margin: 0 auto;
HTML도 같이 올려주셈
html은 제가 수정못하게 되어있더라구요 ㅠㅠ
URL이라도 줘보셈 ㅋㅋ
이거 뭐임 이거지우셈
그리고 이미지 600되있는거 강제로 100%하시고..
그럼 잘맞아짐
이렇게하면 되는데 넣어보세요.
#main_body {max-width: auto!important;}
.cl_title2 img { width:100%!important }
.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 }
}
