@Szabolcs-Zeg
@whitetark
Submitted
Couldn't find a good way how to implement border-radius on linear-gradient (Instagram top border) and decided to avoid switcher for now because I don't have enough knowledge. When I figure out how to create that, I will return to this problem
@Szabolcs-Zeg
Posted
Dear Sivat! I solved this problem with a pseudo element. You can set the background color of an after element, its height: 4px; Border-radius: 4px 4px 0 0 ; In addition, your solution is very nice, congratulations!
@sleeepyskies
Submitted
Overall I enjoyed this challenge.
I had some struggles using grid for the layout. Initially, I had set 2 grid columns, but couldn't convert these to rows using a media query, so I changed to grid-template-areas.
I also had to fiddle around with the buttons, as upon resizing the browser they wouldn't always be level with each other, so I ended up setting the container positions to relative, and setting the buttons postions to absolute. To avoid the buttons and paragraphs from overlapping, I had to set a largin margin-bottom for the p elements.
Are there better ways to deal with these issues? Does my solution go against best-practice?
Any feedback is much appreciated!
@Szabolcs-Zeg
Posted
Dear Sleeepyskies! First of all, congratulations on the solution. You can set the grid with the grid-template-column: 1fr 1fr 1fr; property on desktop. (or repeat(3,1fr) ) In mobile view, only the grid is enough. I think the margin is a good solution for placing the buttons here. I would use the min-height property in a real environment (where the length of the texts may differ slightly). (Here approx. 22em can be good.) One more thing: it might be worth setting the value of the media query to more than 600px. Around 650px it looks pretty weird. But all in all, congratulations again! Your solution is absolutely right!
Marked as helpful
@ronylee11
Submitted
When should I use rem, em, vh, vw and %? ( Like to be exact which one is for margin, which one for padding, which one for min-width max-width, max-height min-height, border-radius... ) I find myself using px all the time and I know its bad for responsiveness, but I just don't know which one to use instead...
@Szabolcs-Zeg
Posted
Hello @ronylee11,
congrats on your solution which looks great. You have right: if you only use 'px' you may have problems with responsive display. The ‘px’ is the only fixed unit, all others are relative. Their use depends on the situation, not the type of element. It is worth getting to know them well, because their correct use can make your work easier. You will find many useful videos on video sharing sites. E.g: https://www.youtube.com/watch?v=N5wpD9Ov_To&ab_channel=KevinPowell or, https://www.youtube.com/watch?v=-GR52czEd-0&ab_channel=WebDevSimplified
@isreal916
Submitted
having problem with the font feel free to correct my mistake
@Szabolcs-Zeg
Posted
Hello!
There are two errors in your code: 1: Google link for font-families are wrong in the html file. Change it from this official site: ie: https://fonts.google.com/specimen/Fraunces (For embedding use the link from the gray area on the left, instead of the website link.)
Happy coding!
Marked as helpful
