@Bishalsnghd07
Posted
Hi, @Murtazaamin39๐
Congrats for completing this challenge๐ and you did a good job๐
I have some suggestion for you, might it be helpful:
1)First of all don't use Github for hoisting your site, it's only use for tracking and saving your local repo into it. By any chance if your local repo get deleted from your pc, then from Github(cloud) you can clone it and reuse it in your local codebase again. For, this purpose github should be used, sometime static files can run on github, sometimes not. So, better to host your site on hoisting website like vercel or netlify for free. Give a try is it solving your issue or not.
2)And Second, this challenge did not need media queries any where, You just have to center your layout in body or in main landmark(main container) by this property ๐ ``` body {
Display: flex; ( can also be use grid will work same )
flex-direction: column;
justify-content: center;( center your div vertically )
align-items: center;( center your div horizontally )
min-height: 100vh;(it ensures an element always maintain a minimum height, even the content is insufficient)
padding: 0.5rem;( by giving padding should maintain your layout in mobile view also)
}
And at last you have to give max-width
to the child div's and adjust in a way that width will set perfectly in smaller screen and as well as in larger screen. Just do a little bit play with it and you will get your desire result.
Hope this small tips will help you ahead in your future projects too.
Once again Welcome to Frontend Mentor, wishing you a joyful journey ahead and Happy Codingโค๏ธ