@MrLanter
Posted
Hi, this is a nice project! I think I have the solution to your responsive problem.
You have defined a min-width for the card. Only for mobile versions that will be below the value of this property, the width will not adapt. Solution: Use a width fix: width: 350px which should adapt with modern browsers or rather width: 80% for better accessibility.
I noticed that you are using rem for font sizes, but it seems that you might have missed applying it to the links?
For the CSS reset I would rather advise targeting all elements with * rather than doing it in <body> because some elements like <h1>, or <p> do not adapt and remain with the browser's default values for margin and padding.
* {
margin: 0px;
padding: 0px;
font-size: 1rem;
}
Using min-height for the card can be visually good at the beginning of the project, but at the end it is better to remove it. If the user sets his text size to very small (which is very rare), there is too much space and that could bother the user. You could try by going to the browser settings to see.
And I would like to ask you if it is intentional to have left spaces in the html or if it is just a bug for me? I would advise you not to put too many to make the code more readable.
I hope this was useful to you, good luck
@MitchellQuevedo
Posted
Thank you so much, that was helpful. @MrLanter
