Как переопределить размер окна: border-box; в определенном разделе

У меня есть свойство * {box-sizing: border-box;}, которое сохраняет входные данные в виде контактов красивыми и раздельными, но делает небольшую «галерею» над ним слегка перемещающейся от центра влево, и я не могу найти, как переопределить его для этого раздела. Я попытался настроить его и установить размер окна в область содержимого, но ничего не работает. Что мне не хватает ..?Как переопределить размер окна: border-box; в определенном разделе

Извините за длинный фрагмент кода здесь, я не хотел пропустить что-то.

Вот мой код и Codepen: http://codepen.io/anon/pen/zKXzZP

<body> 
     <section class="works"> 
     <div class="works--title"> 
      Stuff 
      <hr class="horizontal"> 
     </div> 
     <div class="works--thumbnails"> 
      <a href="#" class="works--item"> 
      <div class="works--itemtext"> 
       <div class="item--primarytext"> 
       lorem lorem lorem lorem lorem 
       </div> 
       <div class="item--secondarytext"> 
       lorem lorem lorem lorem lorem 
       </div> 
      </div> 
      </a> 
      <a href="#" class="works--item"> 
      <div class="works--itemtext"> 
       <div class="item--primarytext"> 
       Lorem ipsum dolor sit amet 
       </div> 
       <div class="item--secondarytext"> 
       similique nesciunt sint 
       </div> 
      </div> 
      </a> 
      <a href="#" class="works--item"> 
      <div class="works--itemtext"> 
       <div class="item--primarytext"> 
       Lorem ipsum dolor sit amet 
       </div> 
       <div class="item--secondarytext"> 
       similique nesciunt sint 
       </div> 
      </div> 
      </a> 
     </div> 
     <!-- end works-thummbnils --> 
     </section> 

     <!-- CONTACT FORM --> 
     <section class="about-contact"> 
     <div class="contact-container"> 

      <h2 class="contact-title">Contact me</h2> 

      <form id="contact" action="#" method="post"> 
      <div class="left"> 
       <input type="text" placeholder="Name" required="required" /> 
       <input type="email" placeholder="Email" required="required" /> 
       <input type="text" placeholder="Subject" required="required" /> 
      </div> 
      <div class="right"> 
       <textarea placeholder="Message" required="required"></textarea> 
      </div> 
      <div class="send-button cl"> 
       <button type="submit">Send</button> 
      </div> 
      </form> 
     </div> 
     </section> 
</body> 

* { 
    color: black; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

.works { 
    padding: 40px 0px; 
} 

.works--title { 
    font-size: 18px; 
    text-align: center; 
    padding-bottom: 20px; 
} 

.works--thumbnails { 
    max-width: 600px; 
    margin: 0 auto; 
} 

.works--thumbnails::after { 
    display: block; 
    content: " "; 
    clear: both; 
} 

.works--item { 
    max-width: calc(50% - 24px); 
    float: left; 
    margin-bottom: 20px; 
    border: none; 
    border-radius: 3px; 
    padding: 5px; 
    background: lightgreen; 
    box-shadow: 0px 0px 1px rgba(0, 0, 255, 0.3); 
    transition: all ease-in-out 90ms; 
} 

.works--item:nth-child(odd) { 
    margin-right: 20px; 
} 

.works--itemtext { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 75px; 
} 

.item--primarytext { 
    font-weight: 500; 
    line-height: 1.3; 
} 

@media (min-width: 830px) { 
    .works--item { 
    max-width: calc(37.1% - 46px); 
    margin-right: 20px; 
    } 
    .works--item:nth-child(3n) { 
    margin-right: 0; 
    } 
} 

@media(max-width: 370px) { 
    .works--item { 
    max-width: 220px; 
    margin-right: auto !important; 
    margin: 0px auto 20px !important; 
    box-sizing: border-box; 
    float: none; 
    display: block; 
    /*??*/ 
    } 
} 


/* CONTACT FORM */ 

.contact-container { 
    width: 100%; 
    padding: 1em; 
    margin: auto; 
} 

.contact-container h2 { 
    text-align: center; 
    text-transform: uppercase; 
    color: #f55; 
} 

#contact input[type="text"], 
#contact input[type="email"], 
#contact textarea { 
    display: block; 
    padding: 10px; 
    margin: 10px auto; 
    width: 100%; 
    font-size: 18px; 
    color: #777; 
    border: 1px solid #ccc; 
} 

#contact textarea { 
    font-size: 16px; 
} 

#contact input:hover, 
#contact textarea:hover { 
    border: 1px solid #888; 
} 

#contact input:focus, 
#contact textarea:focus { 
    border: 1px solid #777; 
} 

#contact textarea { 
    max-width: 100%; 
    min-width: 100%; 
    max-height: 180px; 
    min-height: 180px; 
    resize: none; 
} 

#contact .send-button { 
    text-align: center; 
} 

#contact .send-button button[type="submit"] { 
    color: #fff; 
    background: #e74c3c; 
    border: none; 
    width: 100%; 
    padding: 10px 0; 
    font-size: 20px; 
    text-transform: uppercase; 
    transition: .5s all ease; 
    cursor: pointer; 
} 

#contact .send-button button[type="submit"]:hover { 
    background: #c0392b; 
} 

#contact .send-button button[type="submit"]:focus { 
    position: relative; 
    top: 2px; 
} 


/*######################################\* 
       Responsive 
\*######################################*/ 

@media screen and (min-width: 640px) { 
    .contact-container { 
    width: 600px; 
    } 
    #contact textarea { 
    max-width: 98%; 
    min-width: 98%; 
    min-height: 150px; 
    margin-right: 0; 
    } 
    #contact .right, 
    #contact .left { 
    display: block; 
    } 
    #contact .right { 
    float: right; 
    width: 50%; 
    } 
    #contact .left { 
    float: left; 
    width: 50%; 
    } 
    .cl { 
    clear: both; 
    } 
} 

.about-contact { 
    background-color: lightgrey; 
    padding: 40px 0px; 
    margin-top: 100px; 
}

источник

2016-10-26 Smithy

Simply. Я думаю, вам нужно установить на .works и всех своих детей. Здесь вы:

.works, 
.works * { 
    box-sizing: content-box; 
}

.works * часть переопределить все border-box, которые могут убежать.

С этим он отлично работает.

источник

2016-10-26 16:01:37

ahh..I провел часы с неправильным targeting..thanks @ Birksy89 а – Smithy

Вы радушны. Просто проверьте правильный ответ. Спасибо! –

.works--item { 
    box-sizing: content-box; 
}

Добавить эту недвижимость класса

источник

2016-10-26 15:58:30 Birksy89

Вышеупомянутые рекомендации исправить вашу проблему, но я думаю, что вы делаете тяжелую работу для себя.

Ваши столбцы должны быть только 33,3% ширины с отступом-левым: 20 пикселей.

И тогда окружающая колонка должна иметь отрицательный запас -20px;

Как это:

https://jsfiddle.net/5aeoL9vj/2/

<div class="container"> 
    <div class="grid"> 
     <div class="grid__item"> 
      <div class="grid__item-one"> 
       <span>Item 1</span> 
      </div> 
     </div> 
     <div class="grid__item"> 
      <div class="grid__item-two"> 
       <span>Item 1</span> 
      </div> 
     </div> 
     <div class="grid__item"> 
      <div class="grid__item-three"> 
       <span>Item 1</span> 
      </div> 
     </div> 
    </div> 
</div>

источник

2016-10-26 16:18:16

спасибо, я посмотрю на ваш пример, но я должен отметить, что элементы на реальной странице, над которой я работаю, немного сложнее, это урезанная версия – Smithy

. Чего вы пытаетесь достичь? Если это три столбца, центрированные посередине, тогда это все, что вам нужно. Очевидно, вам нужно установить медиа-запрос для более мелких устройств. –

Как переопределить размер окна: border-box; в определенном разделе

ответ

Смежные вопросы