I need to learn better how to scale page elements. I have the impression that I use percentage incorrectly. Perhaps my use of margin and padding is not correct either. But the way I did it, it works. I welcome suggestions, resources and criticisms to improve my code, mainly the CSS.
Hey, It's nice I think you may consider updating it a little.
1.) For the Circule image you don't need to make it absolute since it's a part of the layout, put all the content in the main section. Just like that
In this main section, you don't need to do anything just do this -
give padding-left, right and top only leave the bottom; and make it flex and give it some gap
.main{ padding: top(px) right 0(For bottom) left; display: flex; flex-direction: column; gap: 10px; (or any that suits) }
for the mobiles - .main{ max-width: 90%; }
for the tables and bigger screens
.main{ max-width: 50%; }
<section" role="main" aria-roledescription="main section">
<p class="">advice #<span></span></p>
<img src="./images/pattern-divider-desktop.svg" alt="divider">
Over here you can give the padding to the .diceWrapper and then make it's radius 190px to make it a circle and then use transform: translateY(50%) or translateY(-50%); it will automatically be in the bottom of the section at it's middle point as it was in the design.
<div class="diceWrapper">
<img class="diceImage animate-spin" src="./images/icon-dice.svg" alt="dice button">
</div>
Is this good enough?
it's nice the only thing you may need to change is the width and height of your box element, it's static right now which is 200 or something which may cause problems in bigger screens, for example, a 32inch screen will not be able to see what is that you've written in the box in some cases user will have to change its zoom level which is not a good UI experience, make it dynamic the width and height using the min-width instead of width and make you can change it to let maybe's say 25% on a larger screens and as well as the font should be bigger as well on larger screens.
