Простое удобное задание веб-страницы - слишком большие ящики с абзацем, но слишком маленькие

Question

На моей странице есть три коробки с текстом в них.

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

Могу ли я связать текст с коробкой, чтобы они стали больше и меньше вместе?

должен выглядеть, как эти: Desktop, tablet, and mobile browser sizes

Mine looks like this: - слишком много места по вертикали между коробками с точки зрения планшета - слишком много пустого пространства в коробках в полном размере в каждом из видов

********** Base styles **********/ 
 
* { 
 
    box-sizing: border-box; 
 
} 
 

 
header { 
 
    text-align: center; 
 
    margin-top: 50px; 
 
    margin-bottom: 30px; 
 
    font: 175% helvetica; 
 
} 
 

 
p { 
 
    border: 1px solid black; 
 
    height: 130px; 
 
    /*margin-left: 10px; 
 
    margin-right: 10px;*/ 
 
    background-color: #b3b3b3; 
 
    padding: 50px 12px 75px 20px; 
 
    font-size: 125%; 
 
} 
 

 
#p1 { 
 
    margin-left: 13px; 
 
    margin-right: 13px; 
 
} 
 

 
#p2 { 
 
    margin-left: 13px; 
 
    margin-right: 13px; 
 
} 
 

 
#p3 { 
 
    margin-left: 13px; 
 
    margin-right: 13px; 
 
} 
 

 
body { 
 
    margin-left: 26px; 
 
    margin-right: 26px; 
 
    padding:0; 
 
} 
 
#label1 { 
 
    height: 30px; 
 
    width: 120px; 
 
    border-left: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-right: none; 
 
    border-top: none; 
 
    background-color: #ff6666; 
 
    padding: 10px 10px 0px 5px; 
 
    text-align: center; 
 
    margin: 0px; 
 
    float: right; 
 
    position: relative; 
 
    top: -276px; 
 
    left: -14px; 
 

 
} 
 

 
#label2 { 
 
    height: 30px; 
 
    width: 120px; 
 
    border-left: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-top: none; 
 
    border-right: none; 
 
    background-color: #ffffb3; 
 
    padding: 10px 10px 0px 5px; 
 
    text-align: center; 
 
    margin: 0px; 
 
    float: right; 
 
    position: relative; 
 
    top: -276px; 
 
    left: -14px; 
 
} 
 

 
#label3 { 
 
    height: 30px; 
 
    width: 120px; 
 
    border-left: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    border-top: none; 
 
    border-right: none; 
 
    background-color: #ff99ff; 
 
    padding: 10px 10px 0px 5px; 
 
    text-align: center; 
 
    margin: 0px; 
 
    float: right; 
 
    position: relative; 
 
    top: -276px; 
 
    left: -14px; 
 
} 
 
/* Simple Responsive Framework. */ 
 
.row { 
 
    width: 100%; 
 
    
 
} 
 

 
/********** DESKTOP **********/ 
 
@media (min-width: 992px) { 
 
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 
 
    float: left; 
 
    } 
 
    .col-lg-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-lg-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-lg-3 { 
 
    width: 25%; 
 
    } 
 
    .col-lg-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-lg-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-lg-6 { 
 
    width: 50%; 
 
    } 
 
    .col-lg-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-lg-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-lg-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-lg-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-lg-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-lg-12 { 
 
    width: 100%; 
 
    } 
 
} 
 

 
/********** TABLET **********/ 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
 
    float: left; 
 
    } 
 
    .col-md-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-md-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-md-3 { 
 
    width: 25%; 
 
    } 
 
    .col-md-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-md-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-md-6 { 
 
    width: 50%; 
 
    } 
 
    .col-md-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-md-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-md-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-md-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-md-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-md-12 { 
 
    width: 100%; 
 
    } 
 
} 
 

 
/********** MOBILE **********/ 
 
@media (max-width: 0px) and (max-width: 767px) { 
 
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
 
    float: left; 
 
    } 
 
    .col-sm-1 { 
 
    width: 8.33%; 
 
    } 
 
    .col-sm-2 { 
 
    width: 16.66%; 
 
    } 
 
    .col-sm-3 { 
 
    width: 25%; 
 
    } 
 
    .col-sm-4 { 
 
    width: 33.33%; 
 
    } 
 
    .col-sm-5 { 
 
    width: 41.66%; 
 
    } 
 
    .col-sm-6 { 
 
    width: 50%; 
 
    } 
 
    .col-sm-7 { 
 
    width: 58.33%; 
 
    } 
 
    .col-sm-8 { 
 
    width: 66.66%; 
 
    } 
 
    .col-sm-9 { 
 
    width: 74.99%; 
 
    } 
 
    .col-sm-10 { 
 
    width: 83.33%; 
 
    } 
 
    .col-sm-11 { 
 
    width: 91.66%; 
 
    } 
 
    .col-sm-12 { 
 
    width: 100%; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<meta name="description" content="Simple restaurant webpage"> 
 
<meta name="keywords" content="restaurant"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="css/index.css"> 
 
<title>Assignment 2</title> 
 
</head> 
 

 

 
<body> 
 
<header>Our Menu</header> 
 

 
<div class="row"> 
 
\t <div class="col-lg-4 col-md-6 col-sm-12"><p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label1">Beef</p></div> 
 
\t <div class="col-lg-4 col-md-6 col-sm-12"><p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label2">Chicken</p></div> 
 
\t <div class="col-lg-4 col-md-12"><p id="p3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
 
\t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
 
\t quis nostrud exercitation ullamco laboris nisi ut aliquip ex</p><p id="label3">Pork</p></div> 
 
</div> 
 
</body> 
 
</html>

Answer 1

У вас есть высота набора для каждой коробки, которая работает на рабочем столе но не при сжатии.

Установите каждую высоту коробки для «авто» вместо «130px» и настроить отступы на каждой коробке соответственно.

Unrelated к вашему вопросу: Кроме того, если у вас есть элементы, которые имеют те же атрибуты (# p1, # p2, # p3, # label1, # label2, # Метка3), вы можете просто использовать Div класс вместо индивидуальный идентификатор для каждого элемента. (Просмотреть мою codepen для справки: http://codepen.io/johndurso/pen/xgLZEw/)

HTML:

<div class="row"> 
    <header>Our Menu</header> 
</div> 

<div class="row"> 
    <div class="col-lg-4 col-md-6 col-sm-12"> 
     <div class="title" style="background-color: #ff6666;">Chicken</div> 
     <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p> 
    </div> 

    <div class="col-lg-4 col-md-6 col-sm-12"> 
     <div class="title" style="background-color: #ffffb3;">Beef</div> 
     <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p> 
    </div> 

    <div class="col-lg-4 col-md-12"> 
     <div class="title" style="background-color: #ff99ff;">Pork</div> 
     <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, uis nostrud exercitation ullamco laboris nisi ut aliquip ex</p> 
    </div> 
</div> 
</body> 

CSS:

header { 
    text-align: center; 
    margin: 50px 0; 
    font: 28px helvetica; 
} 

div { 
    position: relative; 
} 

p.description { 
    border: 1px solid black; 
    height: auto; 
    background-color: #b3b3b3; 
    padding: 50px 10px 10px; 
    font-size: 20px; 
    margin: 0 10px 10px 0; 
} 

.title { 
    position: absolute; 
    top: 0px; 
    right: 10px; 
    padding: 10px 50px; 
    border: 1px solid black; 
    background-color: #ff6666; 
    text-align: center; 
} 

body { 
    margin: 0 26px; 
    padding:0; 
} 
/* Simple Responsive Framework. */ 
.row { 
    width: 100%; 
} 

/********** DESKTOP **********/ 
@media (min-width: 992px) { 
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 
    float: left; 
    } 
    .col-lg-1 { 
    width: 8.33%; 
    } 
    .col-lg-2 { 
    width: 16.66%; 
    } 
    .col-lg-3 { 
    width: 25%; 
    } 
    .col-lg-4 { 
    width: 33.33%; 
    } 
    .col-lg-5 { 
    width: 41.66%; 
    } 
    .col-lg-6 { 
    width: 50%; 
    } 
    .col-lg-7 { 
    width: 58.33%; 
    } 
    .col-lg-8 { 
    width: 66.66%; 
    } 
    .col-lg-9 { 
    width: 74.99%; 
    } 
    .col-lg-10 { 
    width: 83.33%; 
    } 
    .col-lg-11 { 
    width: 91.66%; 
    } 
    .col-lg-12 { 
    width: 100%; 
    } 
} 

/********** TABLET **********/ 
@media screen and (max-width: 991px) { 
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
    float: left; 
    } 
    .col-md-1 { 
    width: 8.33%; 
    } 
    .col-md-2 { 
    width: 16.66%; 
    } 
    .col-md-3 { 
    width: 25%; 
    } 
    .col-md-4 { 
    width: 33.33%; 
    } 
    .col-md-5 { 
    width: 41.66%; 
    } 
    .col-md-6 { 
    width: 50%; 
    } 
    .col-md-7 { 
    width: 58.33%; 
    } 
    .col-md-8 { 
    width: 66.66%; 
    } 
    .col-md-9 { 
    width: 74.99%; 
    } 
    .col-md-10 { 
    width: 83.33%; 
    } 
    .col-md-11 { 
    width: 91.66%; 
    } 
    .col-md-12 { 
    width: 100%; 
    } 
} 

/********** MOBILE **********/ 
@media screen and (max-width: 767px) { 
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 
    float: left; 
    } 
    .col-sm-1 { 
    width: 8.33%; 
    } 
    .col-sm-2 { 
    width: 16.66%; 
    } 
    .col-sm-3 { 
    width: 25%; 
    } 
    .col-sm-4 { 
    width: 33.33%; 
    } 
    .col-sm-5 { 
    width: 41.66%; 
    } 
    .col-sm-6 { 
    width: 50%; 
    } 
    .col-sm-7 { 
    width: 58.33%; 
    } 
    .col-sm-8 { 
    width: 66.66%; 
    } 
    .col-sm-9 { 
    width: 74.99%; 
    } 
    .col-sm-10 { 
    width: 83.33%; 
    } 
    .col-sm-11 { 
    width: 91.66%; 
    } 
    .col-sm-12 { 
    width: 100%; 
    } 
}