a not responsive Stat Preview Challenge

Hi, @meantoes. It's a good solution. Keep coding. I have some suggestions for you.

1 - I see this coding style a lot in others. I don't know why, it's a new style? If you use the basic global reset, everything will be easy for you. To be honest I wrote this comment to other coders and copy them to you because you are in the same situation.

margin: 0;
padding: 0;
box-sizing: border-box;
}

box-sizing: border-box; is so important. This topic is related to the box-model. It is one of the most important topics in CSS. Be sure to understand the fundamentals of CSS. This will make you feel more comfortable. Please check the resources.

The box model

The box-sizing property

Learn CSS Box Model In 8 Minutes

I think you can focus on the fundamentals of CSS and try to solve the problem again and again. It'll improve your coding skills.

2 - Another common problem is not using Flexbox and CSS Grid with all of ability. You touched on the solution with position properties, it's okay for us because we are here as newbies but we don't want to be newbies forever, right... That's why we should push ourselves for different styles. Check your Flexbox and CSS Grid knowledge and try to solve this problem without position properties again. You can check these resources:

Flexbox Froggy

Grid Garden

Learn Flexbox in 15 Minutes

This learning process will be hard but if you catch the big picture one time, everything will be easy for you, trust me.

I hope these will help you to improve your perspective. Keep coding. All the best.

To center the main on the page using flexbox, replace the height in the body with min-height: 100vh.

For the color of the image , change the class name of the div containing the picture. give .image a background-color of soft violet and add height of 100%, object-fit: cover; mix-blend-mode : multiply and opacity:0.8.

<div class="stat-image"><picture><img></picture></div>
.stat-image{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING