@Rayco21
Posted
.recipe-img { width: 100%; height: 30rem; border-radius: 1.2rem; object-fit: cover; }
this height:30rem is making the img unscalable, I think it's better to remove it
your lists and table looks good, but if you think table element is too confusing to style, then you can just use div and turn it into a flexbox or css grid to build up a table, which is easier to control imo
@Rayco21: Hi! Thanks for your feedback! What do you mean with the image being unscalable? I added height: 30rem to constrain the height of the image as a container, but object-fit: cover lets the image to adapt to the shape of the container. If I would remove the height declaration, the image height would be too much and occupy a large part of the screen. I could have chosen to set the aspect ratio to solve this problem, but it works ok for me this way. Did you try to resize the page? Did you see anything that didn't work as it should? I wouldn't say it's confusing to style the table, but I agree that it's more complicated and less flexible, but I wanted to use the semantically appropriate element.
@Rayco21
Posted
@morauszkia
"If I would remove the height declaration, the image height would be too much and occupy a large part of the screen"
no, the height wouldn't be too much because:
currently you set height: 30rem, which is 300px(by default, browser has 1rem = 16px by default, and you have html { font-size:62.5% } so 1 rem is 16px * 62.5% = 10 px)
even if you remove height: 30rem, the height of the image will still remain 300px max (because this image comes in a size of 1312 x 600 pixels, with your css set up your img has 656 max width, which is half of the original size, so the height will also have max 300px)
your img on mobile version is scalable, which means your img is responsive for different screen sizes, so when you resize your screen horizontally to change the width, the img of the height will also be adjusted accordingly,
but your image is unscalable on desktop version ( when width > 640px ), the height of the img is always 300px, if this is what you want it to be then it's fine, it's not wrong, but if you want it to be responsive like it is on mobile version, you need to remove the height: 30rem and the the object-fit can also be removed
Marked as helpful
@Rayco21: You're right. I remembered wrong. Nevertheless, I think I will leave it this way. I like the img keeping its height and being larger on smaller screens as well, and not to shrink with the decreasing width.
