Ravenous Part 1 BusinessList Styling

Hey guys,

After I completed Rav part 1 all is set and done but for some reason my BusinessList components fail to load correctly, I checked it with react tools and the div containers for the pictures are perfectly fine and all but still the pictures that are loaded are so big.

I have checked 3 times the Business.css file as it is the rendered component inside the BusinessList JSX, but something is off since it fails to give the pictures height and width so it wont overlap the container.

I have worked through the part with the video too to triple check it.

My Business.js file:

import React from 'react';
import './Business.css';

const business = {
    imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
    name: 'MarginOtto Pizzeria',
    address: '1010 Paddington Way',
    city: 'Flavortown',
    state: 'NY',
    zipCode: '10101',
    category: 'Italian',
    rating: 4.5,
    reviewCount: 90
}

class Business extends React.Component {
    render() {
        return (
        <div className="Business">
        <div className="image-container">
        <img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' alt=''/>
  </div>
    <h2>{business.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
    <p>{business.address}}</p>
    <p>{business.city}</p>
    <p>{business.state} {business.zipCode}</p>
    </div>
    <div className="Business-reviews">
    <h3>{business.category}</h3>
    <h3 className="rating">{business.rating}</h3>
    <p>{business.reviewCount} reviews</p>
    </div>
  </div>
</div>
        );
    }
}

export default Business;

My Business.css file:

.Business {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16.66rem;
  margin: 0 .5rem 2.3rem .5rem;
}

.Business .image-container {
  height: 16.66rem;
  margin-bottom: 1rem;
}

.Business h2 {
  margin-bottom: .5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.Business-information {
  display: flex;
  justify-content: space-between;
}

.Business-information p {
  font-size: .88rem;
  font-weight: 300;
  line-height: 1rem;
}

.Business-address {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.Business-reviews {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}

.Business-reviews h3 {
  color: #CCA353;
  font-weight: 600;
}

.Business-reviews .rating {
  font-size: .88rem;
  line-height: 1rem;
}

Thanks for the help!

Yeah well, managed to solve itm the problem was:

The excercise asked me to add this css to the App.css:

/* Universal Styles */

html {
  font-size: 18px;
}

@media only screen and (max-width: 560px) {
  html {
    font-size: 15px;
  }
}

input:focus {
  outline: none;
}

/* Reusable Component - Image Container */

.image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.image-container img {
  width: 100%;
}

/* App Styles */

.App {
  font-family: 'Work Sans', sans-serif;
}

h1 {
  padding: .66rem 0;
  text-align: center;
  background-color: #cca353;
  font-family: Poppins, sans-serif;
  font-size: 1.8rem;
  color: #fff;
}

while in the solution the app.css contains this code:

/* Universal Styles */

html {
  font-size: 18px;
}

@media only screen and (max-width: 560px) {
  html {
    font-size: 15px;
  }
}

input:focus {
  outline: none;
}

/* Reusable Component - Image Container */

.image-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.image-container img {
  width: 100%;
}

/* App Styles */

.App {
  font-family: 'Work Sans', sans-serif;
}

h1 {
  padding: .66rem 0;
  text-align: center;
  background-color: #cca353;
  font-family: Poppins, sans-serif;
  font-size: 1.8rem;
  color: #fff;
}

Edit: After posting the two code it seems the absolute same to me, yet the first one fails to laod the images correctly, what could be the problem?

Hi @script4959091261! I saw your JSX & The “Business” component is probably overlapping because of the indentation of one of your closing </div> tags. check the closing div tag & the h2 tag, the indentation is off there. Hope this helps!

Thank you for your answer.
Actually I opened the solution part and all I did was copy the App.css from there and after ctr v it worked, but I will check on the closing div tag as well!