Can't figure out how to get my img to be a bigger size-CodePudding

I'm trying to get this picture on my website to be bigger, but it shrinks way more than I expected it to. I'm following along with a tutorial, and his website image had no issue with being small. I've tried resizing the picture and messing with the height and width, but that doesn't give me the desired results. I will attach the image and the results I'd like to achieve below, along with the code.

What I'd like the picture to look like The image I'm using

<!--Hero Section-->
<section id="hero">
    <div >
       <div >
           <div >
               <div >
                  <h1 > Real recipes made from the heart</h1>
                  <p >Soul Kitchen is a trusted resource for home cooks & food lovers with multiple tested recipes, guides, and meal plans! I hope you enjoy your stay!</p>
                    <div >
                       <a href="#" >Explore Recipes</a>
                    <a href="#" >Learn More</a>
                    </div>
               </div>
           </div>
           <div >
               <div >
                   <img src="./shaif-s-cuisine-starter_files/images/hero2 (940 × 788 px) (1220 × 1228 px).png"  alt="food img" />
               </div>
           </div>
       </div>
    </div>
</section>
<!--End of Hero Section-->

/*Hero Section*/
 .hero-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
 flex-direction: column-reverse;
 gap: 5rem;
  }

.hero-left-wrapper{
 max-width: 360px;
 }

.hero-img-wrapper{
   max-width: 400px;
width: 90%;
margin: 0 auto;
}

.hero-heading{
font-family: 'Playfair Display';
font-weight: 600;
line-height: 2.8rem;
text-align: center;
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: #360215;
}

.hero-info{
text-align: center;
font-size: 1.4rem;
margin-bottom: 1.5rem;
color: #360215;
}

.button-wrapper{
 text-align: center;
 }

@media only screen and (min-width: 768px){

.hero-wrapper{
    flex-direction: row;
    gap: 0;
 }

.hero-left{
    flex: 3;
 }

.hero-right{
    flex: 4;
 }

.hero-heading{
    font-size: 3.6rem;
    margin-bottom: 2rem;
    text-align: left;
 }

.hero-info{
    margin-bottom: 2rem;
    text-align: left;
    font-size: 1.8rem;
 }

.button-wrapper{
   text-align: left;
  }

.hero-img-wrapper{
    max-width: none;
    width: 90%;
 }
}

/**End of Hero Section/

CodePudding user response：

Welcome to SO!

You have the hero-img class set up in your html but it's not actually defined in your CSS and thus doing nothing for you. Instead of trying to style it inline, why not use the class and set the attributes as needed? I used responsive units (see: https://www.sitepoint.com/css-viewport-units-quick-start/) for my example but you can do it with whatever works for you. You can also add the class to the media query and change it as needed.

/*Hero Section*/

.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 5rem;
}

.hero-img {
  height: 80vh;
  width: auto;
}

.hero-left-wrapper {
  max-width: 360px;
}

.hero-img-wrapper {
  max-width: 400px;
  width: 90%;
  margin: 0 auto;
}

.hero-heading {
  font-family: 'Playfair Display';
  font-weight: 600;
  line-height: 2.8rem;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #360215;
}

.hero-info {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #360215;
}

.button-wrapper {
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .hero-wrapper {
    flex-direction: row;
    gap: 0;
  }
  .hero-left {
    flex: 3;
  }
  .hero-right {
    flex: 4;
  }
  .hero-heading {
    font-size: 3.6rem;
    margin-bottom: 2rem;
    text-align: left;
  }
  .hero-info {
    margin-bottom: 2rem;
    text-align: left;
    font-size: 1.8rem;
  }
  .button-wrapper {
    text-align: left;
  }
  .hero-img-wrapper {
    max-width: none;
    width: 90%;
  }
}

<section id="hero">
  <div >
    <div >
      <div >
        <div >
          <h1 > Real recipes made from the heart</h1>
          <p >Soul Kitchen is a trusted resource for home cooks & food lovers with multiple tested recipes, guides, and meal plans! I hope you enjoy your stay!</p>
          <div >
            <a href="#" >Explore Recipes</a>
            <a href="#" >Learn More</a>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://i.stack.imgur.com/G1Mbo.jpg"  alt="food img" />
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Trying adding a width and a max-width on your hero-image class.

/*Hero Section*/

.hero-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
  gap: 5rem;
}

.hero-left-wrapper {
  max-width: 360px;
  margin: auto;
}

.hero-img-wrapper {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
}

.hero-heading {
  font-family: 'Playfair Display';
  font-weight: 600;
  line-height: 2.8rem;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  color: #360215;
}

.hero-info {
  text-align: center;
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
  color: #360215;
}

.button-wrapper {
  text-align: center;
}


.hero-img {
  max-width: 100%;
  border: solid forestgreen 2px;
  border-radius: 10px;
}

@media only screen and (min-width: 768px) {
  .hero-wrapper {
    flex-direction: row;
    gap: 0;
  }
  .hero-left {
    flex: 3;
  }
  .hero-right {
    flex: 4;
  }
  .hero-heading {
    font-size: 3.6rem;
    margin-bottom: 2rem;
    text-align: left;
  }
  .hero-info {
    margin-bottom: 2rem;
    text-align: left;
    font-size: 1.8rem;
  }
  .button-wrapper {
    text-align: left;
  }
  .hero-img-wrapper {
    max-width: none;
    width: 100%;
  }
}

<!--Hero Section-->
<section id="hero">
  <div >
    <div >
      <div >
        <div >
          <h1 > Real recipes made from the heart</h1>
          <p >Soul Kitchen is a trusted resource for home cooks & food lovers with multiple tested recipes, guides, and meal plans! I hope you enjoy your stay!</p>
          <div >
            <a href="#" >Explore Recipes</a>
            <a href="#" >Learn More</a>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="https://i.stack.imgur.com/G1Mbo.jpg"  alt="food img" />
        </div>
      </div>
    </div>
  </div>
</section>
<!--End of Hero Section-->