물어보기XpressEngine

 구글링 하다 index.html  요 친구를 만나게 되어 제 사이트 모바일웹에 적용좀 해보려고 하고 있습니다

현재 https://kkangc.com 가시면 보실수 있는데요

사용하고 있는 레이아웃은 equeer레이아웃 입니다

 

네모박스가 너무 크고 비중을 많이 차지하는데요

 

아래 css를 레이아웃 css에 적용시켜봣는데

기존 레이아웃을 깨트려먹는 상태가 되더라구요

 

사이즈를 작고 정렬하고 싶고 기존 css에 영향을 안미치게 하려면 어떻게 해야 할까요;;

css 고수분들 좀 부탁드립니다 ㅠㅠ

 

* {
  margin: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  box-sizing: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

*:focus { outline: none; }

html { box-sizing: border-box; }

body {
  background-color: #ecf0f1;
  min-width: 300px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

h1, h2, h3, h4, h5 {
  display: block;
  font-weight: 400;
}

li, span, p, a, h1, h2, h3, h4, h5 { line-height: 1; }

p { display: block; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}

/* Reset */


/* 여긴 사용안함

html, body { height: 100%; }

/*.navigation-bar, .navigation-bar .navbox-tiles, .navbox-trigger, .navbox-tiles .tile, .navbox-tiles .tile .icon .fa, .navbox-tiles .tile .title {
  -webkit-transition: all .3s;
  transition: all .3s;
}*/

/*.navbox-tiles:after {
  content: '';
  display: table;
  clear: both;
}

/* Core Styles */


/*.navigation-bar {
  height: 50px;
  position: relative;
  z-index: 1000;
}

.navigation-bar .bar {
  background-color: #252525;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
}

.navigation-bar .navbox {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all .2s;
  transition: all .2s;
}

.navigation-bar .navbox-tiles {
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
}

.navigation-bar.navbox-open .navbox-trigger { background-color: #F44336; }

.navigation-bar.navbox-open .navbox {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity .3s, -webkit-transform .3s;
  transition: opacity .3s, transform .3s;
}

.navigation-bar.navbox-open .navbox-tiles {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
여긴 사용안함*/

.navbox-trigger {
  background-color: transparent;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navbox-trigger .fa {
  font-size: 20px;
  color: #fff;
}

.navbox-trigger:hover { background-color: #484747; }

.navbox {
  background-color: #484747;
  width: 100%;
  max-width: 380px;
  -webkit-backface-visibility: initial;
  backface-visibility: initial;
}

/*.navbox-tiles {
  width: 100%;
  padding: 25px;
}*/



.navbox-tiles .tile {
  display: block;
  background-color: #3498db;
  width: 30.3030303030303%;
  height: 0;
  padding-bottom: 29%;
  float: left;
  border: 2px solid transparent;
  color: #fff;
  position: relative;
}

.navbox-tiles .tile .icon {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.navbox-tiles .tile .icon .fa {
  font-size: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-backface-visibility: initial;
  backface-visibility: initial;
}

.navbox-tiles .tile .title {
  padding: 5px;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.navbox-tiles .tile:hover {
  border-color: #fff;
  text-decoration: none;
}
.navbox-tiles .tile:not(:nth-child(3n+3)) {
 margin-right: 4.54545454545455%;
}

.navbox-tiles .tile:nth-child(n+4) { margin-top: 15px; }
 @media screen and (max-width: 370px) {

.navbox-tiles .tile .icon .fa { font-size: 25px; }

.navbox-tiles .tile .title {
  padding: 3px;
  font-size: 11px;
}
}

 

Atachment
첨부 1
  • profile
    구미호 2017.12.07 17:51:22
    보통 이런것을 그냥 해드리지 않을것 같아요 ...
  • profile
    누구니이넌 2017.12.07 18:04:47
    그렇군요 그래서 혼자 수정하다가 잠시 닫아놨어여 ㅋㅋ 가운데 정렬만 좀 깔끔하게 떨어지게 하면 마무리되는데
    좀 삐뚤빼뚤하네요 ㅋㅋ

서버에 요청 중입니다. 잠시만 기다려 주십시오...