@Blackpachamame
Posted
Greetings! you have done a great job š
š Some suggestions
- Use
min-heightandmax-width, this will help the content stretch or shrink if you need to. Unlikeheightandwidthwhich can cause your content to be cut off on certain screens - Do not use
%forwidthorheight. Better userem,emorpx - You can apply
display: blockto the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements - Instead of using
marginto center your content in the center of the screen, you can use theflexboxproperties in thebody:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px; /* Separate the main from the footer */
}
Marked as helpful
@EnverUsta
Posted
Hey @Blackpachamame
Thank you so much for this valuable feedback. I will be revising my codes again. I also have a question, why don't you prefer using %? As an example shouldn't I use % in the image?
@Blackpachamame
Posted
@EnverUsta Because you would have to adjust the percentage for each screen using media queries. They can lead to unexpected results, for example, this same challenge that you did, on my screen you see a container about 130px wide and high that occupies the entire screen.
@EnverUsta
Posted
@Blackpachamame I see that's true. I should use px, rem, or em if I won't use media-queries. However, using % in img make sense from my perspective. What do you think about it?
@Blackpachamame
Posted
@EnverUsta You probably use media querys with other units, but I'm sure they adapt much better than %. Here you can find a little more detailed information of the types of units and what they are recommended to use for.
@EnverUsta
Posted
@Blackpachamame When I revise your code for this project, it seems like you used % for the img as well. (Don't forget what I am trying to say is in the img)
@Blackpachamame
Posted
@EnverUsta Oh! then it was my confusion. Indeed, for the image to fit correctly to the width of the container, you should use max-width: 100% as you did.
I was referring to the % for the width and height of the containers, like the one in your qr-code-container class
An apology for the confusion
@EnverUsta
Posted
@Blackpachamame No worries, and your review helped me a lot! It's awesome to see such helpful people!
@EnverUsta
Posted
@Blackpachamame Also as a side note, we don't need to add display: block if we use display: flex in the parent of img. It simply solves underneath white-space issue š
