React Ravenous Project

I have just finished the Ravenous React project. I would like to continue tinkering with it but the CSS is really bothering me. when the app displays the different businesses all the images are smashed up against each other and towards the bottom the images get longer and can cover on another. I have tried various solutions for this like creating a #img selector and manually setting a width and height and nothing happens. If i’m going to make this presentable it should look like the demo where every image returned is the same size and has space between them. I also am trying to figure out how to put a transparent box behind the text so that you can see the text without squinting.

Hey there.

You can post your css/html code or github link here (remember to format with </>) people can help with the specific points you need.

.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;
}

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





class Business extends React.Component{
    render(){
        return (<div className="Business">
        <div className="image-container">
          <img src={this.props.business.imageSrc} alt=''/>
        </div>
          <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{this.props.business.state} {this.props.business.zipCode}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category.toUpperCase()}</h3>
            <h3 className="rating">{`${this.props.business.rating} stars`}</h3>
            <p>{this.props.business.reviewCount} reviews </p>
          </div>
        </div>
      </div>);
    }
}
export default Business;

This is how I would organize it, the indentation is what goes inside of what.

Body

  Container: Holds everything, can be full width or not, up to you
  
     Restaurant-boxes: They can have a background image, 
     if you want them to be a consistent size you can specify it 
     with explicit width-height in px

        Info caption box: every restaurant box has a box inside 
        with a caption. This can probably be auto margined 
        to center it. You can set a solid background 
        so it's easier to read but change it's opacity so you 
        still get some of the image

I would honestly draw this up on figma first to have a clear idea of what I want. Then do it with css/html.

I think there are to many separate containers in here, all the separate divs don’t seem to want to work together. this is the original structure that was provided though, so I have been trying to figure out what is different, why the creators rendered the perfect boxes and why mine are all smashed together.

Did you use inspect element? You can often see what css isn’t working this way (and it even gives you warnings when it’s not working as expected.

element.style {
}
<style>
.App {
    text-align: center;
}
<style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    line-height: 1;
}

this is the CSS bit and the other error message at the bottom says:
[HMR] Waiting for update signal from WDS…
localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.
index.js:1 Warning: Each child in a list should have a unique “key” prop.

Check the render method of BusinessList. See https://fb.me/react-warning-keys for more information.
in Business (at BusinessList.js:12)
in BusinessList (at App.js:29)
in div (at App.js:26)
in App (at src/index.js:7)
console. @ index.js:1

So for my solution to the CSS problem I removed the image-container div and moved the image to the background :

class Business extends React.Component{
    render(){
     const divStyle = {      backgroundImage: 'url('+ this.props.business.imageSrc + ')     };
      
        return (<div className="Business"style={divStyle}>
        
          <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{this.props.business.state} {this.props.business.zipCode}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category.toUpperCase()}</h3>
            <h3 className="rating">{`${this.props.business.rating} stars`}</h3>
            <p>{this.props.business.reviewCount} reviews </p>
          </div>
        </div>
      </div>);
    }
}

I created a div style and inserted it into the outer most div , now it looks like this: