At the end of the video, to solve the line.svg not lining up, Mosh uses relative positioning by adding another class, but wouldn’t the “easiest” solution be to add a margin-top: 1rem; to the .quote__author class? I also found that font weight of 500 was too thin for the mockup so I used font-weight: 600;
produces the same line.svg positioning and does not require creating a new class. My question is: will using a margin-top of 1rem cause issues in the future? It does not appear as though it will since this is specific to the author media component, but please let me know if anybody knows why it would be a mistake to do as I have above. Thank you.
Adding a margin-top: 1rem would move the author another 1rem away from the quote text. We were happy with the author’s position but not with the line’s position. So it’s feels more natural to me to apply some correction to the position of the line (by whatever means) than to move the author around.
Thank you for the explanation and clearing that up for me, Sam.
I also note that the padding-right applied to the badge in the card forces the badge to the next line when viewed in chrome as several mobile phone types with widths of 360ishpx and removing a px or two from the badge’s right padding resolves that issue for all but the very thin, foldable phones. Do you have any suggestions for a method to stop the badge from moving down to the next line at much smaller widths? It no longer matches the mockup when that occurs, but as I am very new to all of this, I do not know how much of a concern that is.
I don’t know which badge you are talking about but if your layout breaks at a certain point you could write media queries to layout the content differently for very small devices.