responsive-problem with the scaling of 2 images with position absolute on
hi there ,
if i resize the window the other on is bigger than the other one and they are not in same position as before .
if anyone had an idea what i can do ? https://codepen.io/Styxio-frik/pen/qEWzwGZ
8 Replies
The reason that one (the left-hand one) is bigger than the other one is that you have given them both a 90% width but then placed them from the sides by different amounts, resulting in them having different amounts of "space". That 90% will be 90% of the available space, so, as you have given the left-hand image more space than the right-hand one, inevitably it will be larger.
so do i need to use px instead of % ?
no, just use the same value.
You currently have one with 56% and the other 60%
set them both to (eg) 60% and they will be the same size
i tried that but then the one on the right is off its place
The images are not centered in their parent "aside" elements.
if you give the aside a display of flex (for example), that might help
🤦♂️ yea woops, kinda new to this.
thankyou for the help !
In general you need to be aware of using percentages. They always have to be a percentage of "something".
For example, on your <main> element you have set a border radius of 5%.
This means that the radius will start at a point 5% along each of it's corresponding edges. If the element is a an exact square, this will mean that the curve will be equal. However, if the element is not a square, as is more often the case, the 5% along one side won't be the same distance as 5% along another side. This results in the strange corners, especially noticeable on narrower viewports, that you currently have. It is generally better to use a fixed value, such as pixels for corner radius to ensure that it is equal on both sides, regardless of the length of the sides themselves.
This means that the radius will start at a point 5% along each of it's corresponding edges. If the element is a an exact square, this will mean that the curve will be equal. However, if the element is not a square, as is more often the case, the 5% along one side won't be the same distance as 5% along another side. This results in the strange corners, especially noticeable on narrower viewports, that you currently have. It is generally better to use a fixed value, such as pixels for corner radius to ensure that it is equal on both sides, regardless of the length of the sides themselves.
okey thank you for the advice !