Tea Cozy Project: Why are my images so big?

I don’t understand why the images in my totm(tea of the month) section are so massive. I downloaded them and saved them to a local directory. Tried using the URL links. I’ve tried adding a height and max-heigh, width and max-width. Nothing I do seems to change the size of them. Any ideas?

<!DOCTYPE html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Tea Cozy</title>
    <link rel="stylesheet" type="text/css" href="resources/css/index.css">
        <img src="resources/images/img-tea-cozy-logo-2.png" alt="Cozy Tea Logo">
          <li><a href="#mission">Mission</a></li>
          <li><a href="#featured_tea">Featured Teas</a></li>
          <li><a href="#location">Location</a></li>
        <section class="mission">
          <div id="mission-text">
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        <section class="totm">
          <h2>Tea of the month</h2>
          <h4>What's steeping at The Tea Cozy?</h4>
          <div class="totm-image"><img src="/resources/images/img-berryblitz.jpeg"><p>Fall Berry Blitz Tea</p> </div> 
          <div class="totm-image"><img src="/resources/images/img-spiced-rum.jpeg"><p>Spiced Rum Tea</p></div> 
          <div class="totm-image"><img src="/resources/images/img-donut.jpeg"><p>Seasonal Donuts</p></div> 
          <div class="totm-image"><img src="/resources/images/img-myrtle-ave.jpeg"><p>Myrtle Ave Tea</p></div> 
          <div class="totm-image"><img src="/resources/images/img-bedford-bizarre.jpeg"><p>Bedford Bizarre Tea</p></div> 

* {
    font-family: Helvetica;
    color: seashell;
    background-color: black;   
    text-align: center;
    /*reset of browser's default values*/
    margin: 0;
    padding: 0;
    opacity: .9;

header {
    border-bottom: 1px solid seashell;
    justify-content: space-between;
    align-items: center;
    display: flex;
    width: 100%;

header img {
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;

header li {
    list-style: none;
    display: inline-block;
    text-decoration: none;
    color: seashell;
    padding-right: 1em;

.mission {
    background-image: url(/resources/images/img-mission-background.jpeg);
    margin: 0 auto;
    display: flex;
    background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
    width: 80%;
    background-repeat: no-repeat;
    background-position: center;
    height: 700px;
    justify-content: center;

#mission-text {
    margin: auto;
    background-color: black;
    width: 100%;
    padding: 10px 30px;

.totm {
    width: 1000px;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-content: center;
.totm-image {
    max-width: 300px;
    display: inline-block;
    height: 200px;

class="totm-image" is inside the <div> tags and to work needs to go inside the img tags.

Hope that helps!

1 Like