While working with react, I encountered an issue with a circle component that I'm trying to display on the screen. The problem arises when certain view sizes are reached, causing small artifacts like flat ends to appear in some of the circles.
View width 980px shows circles with flat sides
.ballholder{
display:flex;
flex-wrap: wrap;
justify-content: space-evenly;
background-color:rgb(206,35,212);
padding:0.5vw;
border-radius: 5%;
border:2px solid black;
}
.aball{
background-image: linear-gradient(to bottom right, white, whitesmoke, rgb(150,150,150));
color:black;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
width:2vw;
height:2vw;
padding:0.05vw;
margin:0.20vw;
font-size:1.3vw;
}
Below is the parent component code:
import React, { Component } from "react";
import { Switch, Route, Redirect, Link } from "react-router-dom";
import Ball from "./Ball";
import "../App.css";
export default class Ballswitch90 extends Component {
constructor(props) {
super(props);
this.state = {
};
}
render() {
const balls = this.state.balls.map((a, i) =>
a ? (
<Ball p={{ num: i + 1, clicked: false }} />
) : (
<Ball p={{ num: i + 1, clicked: true }} />
)
);
return <div className="ballholder">{balls}</div>;
}
}
Code for the Ball component:
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from "react-router-dom"
import '../App.css'
export default class Ball extends Component {
constructor(props) {
super(props)
this.state = {
num:props.p.num,
clicked:props.p.clicked
}
}
render() {
return (
<div>
{this.state.clicked
?
<div className="aball">{this.state.num}</div>
:
<div className="aballred">{this.state.num}</div>
}
</div>
)
}
}
I have attempted to adjust padding and margins, but it only affected the size at which the flats appeared.