When I shrink my screen size down to a Bootstrap's medium, small, or extra small, my click handlers stop working and so does the css hover property

Question

I have a react component that represents a product. When a user clicks the product, it is added to the cart via the click handler called "handleAddProduct". For some mysterious reason, when I shrink my screen past a certain pixel count (anything smaller than a bootstrap col-lg) this click handler stops working completely and so does the hover property which turns the mouse into a pointer. I've had this project for many months and have no idea how this could magically start happening. Any ideas as to why the click handler and css stop functioning? I'll post the component and it's css below:

Product Component:

class SingleProduct extends Component {

    constructor(props) {
        super(props);
        this.handleAddProduct = this.handleAddProduct.bind(this);
    }

    handleAddProduct() {

        this.props.addToCart(this.props.product);
        this.props.calculateCartTotals();

    }

    render() {
        const { product, showReceipt } = this.props;

        return (
            <div id="singleProduct" className="wow flipInY">
                <div className="row">

                    <div id="examineIcon" className="col-lg-12 col-md-12">
                        <Link to={`/productProfile/${product._id}`}><i className="fa fa-arrows-alt"></i></Link>
                    </div>
                    {/* May want to turn product's symbol into a component that returns its value
                        based on product.category */}
                    <div id="pricetag" className="col-lg-12 col-md-12">
                        <i className={`${product.category === 'pharmaceutical' ? 'fa fa-flask fa-4x' : 'fa fa-leaf fa-4x'}`} onClick={showReceipt ? null : this.handleAddProduct}></i>
                    </div>

                    <div className="col-lg-12 col-md-12">
                        <p id="productName" className="bold">{product.name}</p>
                    </div>

                </div>
            </div>
        );
    }

}

Component's corresponding CSS:

#singleProduct {
    border: 2.5px solid #284A75;
    border-radius: 5px;
    width: 100px;
    height: 140px;
    margin-top: 10px;
}

#pricetag i {
    padding-left: 25px;
    color: #1EBEA5;
}

#pricetag i:hover {
    cursor: pointer;
    color: #2C87F3;
}

#productName {
  text-align: center;
  color: #284A75;
}

#examineIcon i {
   padding: 5px 0 0 5px;
   color: #284A75;
}

#examineIcon i:hover {
    color: #2C87F3;
}

Answer 1

Another div was covering my #examineIcon and #pricetag divs when I shrunk the screen down. What I needed to do was removed that div covering my click targets it solved the issue.