Resize browser to see changes made


#1

Hi there, the exercise asked me to do the following:
"In style.css, set the maximum height of the paragraph to 300 pixels.

After you’ve done this successfully, resize the browser and notice how the height of paragraph’s box will no longer expand beyond 300 pixels."

https://www.codecademy.com/courses/learn-html-css/lessons/box-model/exercises/height-max-min?action=lesson_resume

Suppose I set the paragraphs max-height to 1px, why do I not observe the paragraph getting smaller? It appears the same size as when you indicated it as 300px. Shouldn’t we observe the entire paragraph box get crushed?

p {
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 100;
  line-height: 34px;
  min-width: 200px;
  max-width: 800px;
  min-height: 200px;
  max-height: 1px;
}


#2

Kindly share the index.html and style.css files. Thank you


#3

Style.css

* { 
  border: 1px solid rgba(0, 0, 0, 0.3);
}

body {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_foodlogo.png");
  background-repeat: repeat;
  overflow: hidden;
  text-align: center;
}

.navigation {
  background-color: rgba(255, 255, 255, 0.9);
  height: auto;
  text-align: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
}

.navigation ul {
  padding: 0;
}

.navigation li {
  color: #666666;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 20px;
  text-transform: uppercase;
}

/** Right side styling **/

.content-box {
  background: rgba(255, 255, 255, 0.9);
  height: 500px;
  margin: 0 auto;
  position: relative;
  top: 220px;
  width: 80%;
}

.content-header {
  background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  position: relative;
  top: -50px;
  height: 600px;
}

.content-body {
  margin: 0 auto;
  width: 90%;
}

h1 {
  background: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  text-transform: uppercase;
  top: 130px;
  width: 70%;
}

h2 {
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}

h3 {
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 0;
  text-transform: uppercase;
}

p {
  color: #333;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 100;
  line-height: 34px;
  min-width: 200px;
  max-width: 800px;
  min-height: 200px;
  max-height: 1px;
  overflow: scroll;
}

.content-box ul {
  padding: 40px 0px;
}

.content-box li {
  background-color: #05A8AA;
  display: inline-block;
  list-style: none;
  margin-bottom: 3px;
  padding: 20px 40px;
  width: 200px;
}

.btn {
  color: #05A8AA;
  border: 1px solid #05A8AA;
  border-radius: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 10px 0px;
  padding: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn:hover {
  background-color: #05A8AA;
  border: 1px solid #05A8AA;
  color: #FFF;
}

Index.html

<!DOCTYPE html>
<html>
<head>
  <title>Davie JR's Menu</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,500,700|Oswald:300,400,700" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div class="navigation">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" width="180px;">
    <ul>
      <li>Menu</li>
      <li>Nutrition</li>
      <li>Order</li>
      <li>Locations</li>
    </ul>
  </div>

  <div class="content-box">
    <div class="content-header">
      <h1>BBQ Bacon Burger</h1>
    </div>
    <div class="content-body">
      <p>Our BBQ Bacon Burger features our special house ground blend of wagyu and sirloin, spiced perfectly, and finished off with just a drop of white truffle oil. A butter grilled brioche bun layered with roasted red onion, perfectly crispy pork belly,
        and our hickory smoked BBQ sauce.</p>
      <br />
      <a href="#" class="btn">Order Now</a>
      <br>
      <ul>
        <li>
          <h3>Calories</h3>
          <h2>678</h2>
        </li>

        <li>
          <h3>Fat</h3>
          <h2>32</h2>
        </li>

        <li>
          <h3>Protein</h3>
          <h2>8</h2>
        </li>

        <li>
          <h3>Carbohydrates</h3>
          <h2>34</h2>
        </li>

        <li>
          <h3>Sodium</h3>
          <h2>112</h2>
        </li>
      </ul>
    </div>
  </div>
  
</body>
</html>

Thank you.


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.