Image not resizing using CSS

July 21, 2022

My image is not resizing using CSS. I tried all the suggestions on previously asked questions but still can’t get it to resize. My style sheet is linked because it moves the items to the center. Please advise what I am doing wrong. TIA

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

.menuContainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menuBox img {
  width: 300px;
  height: 300px;
}

<div class="menuContainer">
  <div class="menuBox"></div>
  <h1 id="item">Food Item1</h1>
  <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p>
  <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">

  <h2 id="hotel">Hotel name1</h2>
  <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p>
  <div class="btn">
    <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
    <button id="random">Random Menu</button>
    <button id="next">:arrrow </button>
  </div>

</div>

>Solution :

<div class="menuBox"></div>

versus

.menuBox img

The css Code adresses an image in a Container with the class menuBox.
In your example the Container does not contain the image.

So your code would look like this:

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

.menuContainer {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menuBox img {
  width: 300px;
  height: 300px;
}

<div class="menuContainer">
  <div class="menuBox">
    <h1 id="item">Food Item1</h1>
    <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p>
    <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">
  </div>
  <h2 id="hotel">Hotel name1</h2>
  <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p>
  <div class="btn">
    <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
    <button id="random">Random Menu</button>
    <button id="next">:arrrow </button>
  </div>

</div>