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
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!
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!
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!
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...
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
having problem with the font feel free to correct my mistake
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!
Hi i don't know how to make resposive pls help
