Ravenous part 1 - styling

Hello, I’m on the ravenous (app part 1) link to exercise and whenever I run the app the css styling on the Business images looks off. The images are too large and don’t fit within the container. Other elements within the same div render appropriately. Please help

//Business.js
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={business.imageSrc} 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} stars</h3>
                        <p>${business.reviewCount} reviews</p>
                    </div>
                </div>
            </div>
        )
    }
}

export default Business;

and

//Business.css
.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;
}

Hello @giga3072569673, welcome to the forums! Could you please post your code, as we can’t see the code you have written when we follow the link.

hello @giga3072569673 I had very similar issues when I finished the ravenous part 1, all my styling was off and I couldn’t figure out where was the problem. What I did is I copied all the given css again and pasted in my css files. I found out my App.css was wrong and that sorted the problem of the entire project.
But i see some issues with your code that i’m not sure if it’s related:

<p>{`${business.state} ${business.zipCode}`}</p>
<p>${business.reviewCount} reviews</p>

You don need to put placeholders cause you are writting directly on a <p>.

try to change to:

<p>{business.state} {business.zipCode}</p>
<p>{business.reviewCount} reviews</p>

I hope that helps!

2 Likes