As a novice coder working on a dice rolling app using React, I've hit a roadblock with a CSS problem that's proving to be quite challenging. My goal is to have a row of 6 dice, each enclosed in a background box that changes color when the React state changes. While I have the React functionality in place, aligning the background boxes correctly has been a struggle.
I'm not well-versed in CSS and my main focus is on learning React/Redux rather than diving deep into CSS intricacies. The issues I'm facing with the code are quite baffling to me, particularly the usage of 'display: flex'. Any insights on why my current code isn't producing the desired effect would be highly valuable to me.
Below is the snippet of my code along with a screenshot showcasing the issue:
#css
.diceContainer {
display: flex;
justify-content:center;
padding:3vw;
margin-right: 4%;
}
.diceContainer img {
height: 70px;
width: 70px;
padding: 15px 0 0 15px;
margin-right: .5px;
filter: drop-shadow(0 0 3px);
}
.dice_background_active {
background: linear-gradient(#5F8EC9,#2255BE) 0 0 / 80px 80px no-repeat;
}
#jsx
<div className="diceContainer">
<div className={this.state.oneSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 1)} src="img1"
/></div>
<div className={this.state.twoSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 2)} src="img2"
/></div>
<div className={this.state.threeSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 3)} src="img3"
/></div>
<div className={this.state.fourSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 4)} src="img4"
/></div>
<div className={this.state.fiveSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 5)} src="img5"
/></div>
<div className={this.state.sixSelected ? "dice_background" : "dice_background_active"}>
<img onClick={this.handleOnClick.bind(this, 6)} src="img6"
/>
</div>
</div>