Ravenous part 1 and 2 - styling

[deborahbb]

Hi! I’m stuck with this. I’ve alredy done both part 1 and 2, but my page still not loadding as well.
Prints 1 and 2.
I’ve checked the solution several times. However I can’t figure out what am I doing wrong?

I hope someone helps me.

Bussiness.js

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

class Business extends React.Component {
    render(){
        const {business} = this.props
        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.toUpperCase()}</h3>
                        <h3 className="rating">{`${business.rating} stars`}</h3>
                        <p>{`${business.reviewCount} reviews`}</p>
                    </div>
                </div>
            </div>
        )
    }
}

export default Business;

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

BussinessList.css

.BusinessList {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 4.4rem 10%;
  }

BusinessList.js

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

class BusinessList extends React.Component {
    render(){
        return (
            <div className="BusinessList">
                 {
                    this.props.businesses.map((business) => {
                        return <Business business={business}/>;
                 })
                 }
            </div>
        );
    }
}

export default BusinessList;

SearchBar.js

import React from 'react';
import './SearchBar';

const sortByOptions = {
    'Best Match': 'best_match', 
    'Highest Rated': 'rating',
    'Most Reviewed': 'review_count'
}

class SearchBar extends React.Component {
    renderSortByOptions() {
        return Object.keys(sortByOptions).map(sortByOption => {let sortByOptionValue = sortByOptions[sortByOption];
            <li key={sortByOptionValue}>{sortByOption}</li>
        });
    }
    render() {
        return (
            <div className="SearchBar">
                <div className="SearchBar-sort-options">
                    <ul>
                        {this.renderSortByOptions()}
                    </ul>
                </div>
                <div className="SearchBar-fields">
                    <input placeholder="Search Businesses" />
                    <input placeholder="Where?" />
                </div>
                <div className="SearchBar-submit">
                    <button>Let's Go</button>
                </div>
            </div>
        )
    }
}

export default SearchBar;

SearchBar.css

.SearchBar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url('./background_search_desktop.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  height: 25rem;
}

.SearchBar-sort-options ul {
  display: flex;
  justify-content: center;
  margin-bottom: 2.22rem;
  color: #ffffff;
}

.SearchBar-sort-options li {
  cursor: pointer;
  width: 4.33rem;
  border-bottom: 1px solid #fff;
  padding: 0 2.58rem .33rem 2.58rem;
  line-height: 1.13;
  text-align: center;
  font-weight: 600;
  font-size: .83rem;
  transition: color .25s;
}

.SearchBar-sort-options li:hover {
  color: #d4cfcf;
}

.SearchBar-sort-options li.active,
.SearchBar-sort-options li.active:hover {
  border-bottom: 1px solid #f0c36c;
  color: #f0c36c;
}

.SearchBar-fields {
  display: flex;
  justify-content: center;
  margin-bottom: 2.88rem;
}

.SearchBar-fields input {
  width: 21rem;
  padding: .66rem 1rem;
  margin-right: 2.22rem;
  border: 1px solid #fff;
  border-radius: 4px;
  font-size: .77rem;
  font-weight: 500;
}

.SearchBar-fields input:last-child {
  margin-right: 0;
}

.SearchBar-submit {
  text-align: center;
}

.SearchBar-submit a {
  border-radius: 4px;
  padding: .72rem 1.7rem;
  background-color: #cca353;
  color: #ffffff;
  font-weight: 600;
  transition: background-color .5s;
}

.SearchBar-submit a:hover {
  cursor: pointer;
  background-color: #a7874b;
}

@media only screen and (max-width: 560px) {
  .SearchBar {
    background-image: url('./background_search_mobile.jpg');
  }

  .SearchBar-sort-options ul {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .SearchBar-fields {
    flex-direction: column;
    align-items: center;
  }

  .SearchBar-fields input {
    margin-right: 0;
    margin-bottom: .86rem;
  }
}

App.js

import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';

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

const businesses = [
  business, 
  business, 
  business, 
  business, 
  business, 
  business
];

class App extends React.Component {
  render(){
    return ( 
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar />
        <BusinessList businesses={businesses} />
      </div>
    );
  }
}

export default App;

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

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
import registerServiceWorker from './reportWebVitals';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!-- CSS reset -->
    <link href="./reset.css" rel="stylesheet" type="text/css">
    <!--Google Fonts-->  
    <link href="https://fonts.googleapis.com/css?family=Work%20Sans:300,500,600" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
     <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>ravenous</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    
  </body>

[lucitemple]

On this project you shouldn’t need to adjust the css at all (copy from the project). Ideas to explore:

1. Make sure you included the correct code in the reset.css file in the public folder
2. Type the entire file path when importing your css files. e.g import './Business.css';
3. Are you missing an index.css file linked to index.js ?

[lorettasavvidou86825]

Hi there… I have the same issue exactly and have double and tripled checked the three points you’ve mentioned above. I have been through the get unstuck videos too to see if there was any other error that could cause it but everything is identical…i think?
Basically i am wondering if it’s none of the three points above WHAT could it be and how would I go about in finding it?? (initially i thought it was an issue of the .map() in BusinessList component, but even when I just render one component, the styling is still off…
Thanks!