@Smita-14
Posted
I don't know what you're talking about but this seems pixel perfect to me. That is an outstanding piece of work! One thing you might wanna look into is that the site cuts off from top and bottom on some mobile screen sizes.
Marked as helpful
@grizhlieCodes
Posted
@Smita-14 Thanks, that's very kind 😄!
I'm mostly always trying to advocate letting the content determine the sizes of everything. So isntead of looking at the designs height, setting that as the height of my component, I will instead focus on the font-sizes, line-heights, white-space etc. And in the end this is the best approach as even if we added content or altered it in the future, the design would still work as it was built with responsivity and scalability in mind.
I mostly do these sort of challenges to have examples to use for newer coders that I'm trying to help. I actually even recorded me solving this one for someone here in FEM so they could just watch my process in the hopes they learn something useful. I see a lot of new coders applying heights and widths to everything and I guess I'm just trying to share the alternative, """"enlightened"""", path of responsiveness 😁😀😀
Thanks so much for pointing out my mistake on mobile sizes. As per usual I forgot something. When I code for mobile I forget to also change the height of my viewport and it remains the desktop height 😅
Just fixed it by changing body's from height: 100vh; to min-height: 100vh;. Overlooked this one AGAIN. (3rd project in a row I forgot this haha).
@Smita-14
Posted
Yes, I totally agree with what you said. As a matter of fact I too avoid using height property for the same reasons. (And another reason is that I am still not comfortable with it. I find it a little tricky. 😅)
@grizhlieCodes Yes there can be many ways to solve a problem and may it be your alternative "enlightened path of responsiveness" I hope that you share your approach as it helps in seeing things from different angle. It's nice to know that you made a video tutorial on it and I am hoping that you would also share the video on youtube or other platform so that more people can benefit from it.
P.S. I am glad that you gave solution to the issue, I was stuck wondering how to solve a problem like this. Thank You! 👍😄
@grizhlieCodes
Posted
@Smita-14 Ask and you shall receive haha, here's the YouTube link to the video.
I'm on holiday with more or less 3G internet that seems to be intermittent so I might leave a reply in the evening as to the approach. But then again it may be in the video. Have a look if any of it seems useful. If you have any specific project that you may want to see an alternative solution for I'd be happy to record it, gives me lots of practice too 😁.
I will research a bit as to how some height properties work. I knew this would solve it buy after trying to explain why here I realised I don't really know 😅......... I understand bits of it but not the whole picture.
If I figure it out I'll probably share this here.
@Smita-14
Posted
@grizhlieCodes Thanks a ton for sharing the link! I'll check it out soon!😁 There are times when I am looking for a way to solve a problem (not looking for a quick fix to a problem but to really understand the concept and see what can and cannot solve a problem and why). Often times it is just to see how developers approach a problem and what should be the thought process behind to break it down. I would be really happy if you would talk about it on your next videos.😄
I haven't researched much about height property either as I am currently focused on understanding other CSS topics and to be honest I would be really happy if you do take your time to figure it out and share with us here. It would mean a lot to me! 🙌🙌🙏
