'When writing JSX code, one of my wrapper divs isn't showing on the page, or in the code of the inspect tool

Okay so first of all here is my code

<div
        className={"item-wrapper"}
        >
          <div className="item-wrapper-content">
            <div className="words-wrapper">
                <div className="item-name">
                    {name}
                </div>
                <div className="price">
                    <h1>${price}</h1>
                </div>
                <div className="calories">
                    <h1>Calories: {calories}</h1>
                </div>
                <div className="description">
                    {description}
                </div>
                
            </div>
            <div className="image">
              <div className="item-name">
                {name}
              </div>
              <img 
                src={image}
                alt="thing"
              />
            </div>
          </div>
        </div>

For some reason the "item-wrapper-content" div is not shown on the page, instead it goes from item-wrapper > words-wrapper. I have built a card feature, where the "image" div shows on the front, and the "words-wrapper" is supposed to show on the back when the cards are moused over, but this bug is preventing scss styles from applying to the words-wrapper and image divs. These styles are being applied to item-wrapper-content:

position: relative;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;

Here is where I am hosting the WIP portfolio app on heroku: https://rtg-capstone.herokuapp.com/

htmlcssreactjssassjsx


Solution 1:[1]

Not sure how, but when I pushed to heroku it updated my .scss but not my .js files. I did the git push process again and that fixed it

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Robert Graham

Related Questions