I'm looking to make a soccer pitch design in CSS that can adjust its size based on the device screen, making it responsive and reusable for both web and native app development (specifically with React).
Currently, I'm stuck trying to determine how to maximize the CSS width while maintaining the original dimensions of the soccer pitch on different devices. Any suggestions on how I should modify the width and height properties?
html {
--green: #4c7;
--light: #5d8;
background: var(--green);
}
body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90vmin;
height: 60vmin;
border: 0.5vmin solid white;
background-image:
radial-gradient(circle at 0% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 0%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 0% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 100% 100%, transparent 1%, white 0 1.5%, transparent 0),
radial-gradient(circle at 50% 50%, white 1%, transparent 0),
radial-gradient(circle at 50% 50%, transparent 14%, white 0 14.75%, transparent 0),
linear-gradient(to right, transparent 49.75%, white 0 50.25%, transparent 0),
repeating-linear-gradient(to right, var(--green) 0 10%, var(--light) 0 20%);
}