Herman Liu• 270
@hermsicle
Submitted
AngelusLovell
@AngelusLovell
All comments
- AngelusLovell• 245
@AngelusLovell
Posted
Hello, @Herman
Your solution looks nice. 😍 I have never done a solution this big. Hence, I was wondering about the time it took you to complete this solution. 🤔
0 - Kristiana12• 425
@Kristiana12
Submitted
Hey all, here is my solution. I would really appreciate some feedback. Thank you :)
AngelusLovell• 245@AngelusLovell
Posted
Your solution is really good.😍
Where did you learn "BEM"?
0 - Die Löwenkönigin• 15
@die-lowenkonigin
Submitted
Hi all, please checkout my submitted solution. It will be a pleasure to know your perspective, experiences, etc. when developing a website.
Feel free to comment on:
- suggestion to better solutions (or avoid using 'hacks' :D)
- some nit-picks to a more beautiful and responsive front-end design
- development cycle used for faster and efficient process of building a website.
- other advice related to this challenge
Challenges encountered:
-
Border Radius. I used a hacky way to do it. Please see the live site > scss > media queries > border-radius.
-
Sticky Footer. I used a hacky way to do this. (please see live site > html)
- from html, I added class of h-100.
- from body, class="d-flex flex-column h-100"
- from main, I class="flex-shrink-0"
- from footer, I used container class inside the tag
Notes:
- I do not have the same background as the one in the challenge. The repository that I downloaded does not have a background image included.
AngelusLovell• 245@AngelusLovell
Posted
Bro,
why do u have your code like that.🤔 Create a github repo commit your challenges and host it there.
0 - Matthew Pierce• 495
@shake88junt
Submitted
I had some trouble figuring out the grey background at first, but it was an easy fix after I finally got to solving it. At first glance I thought this website would be very hard to make, but it wasn't too bad. It just made me realize how I should focus more on organizing my code. Next time I will create more reusable classes. Any tips on organization?
AngelusLovell• 245@AngelusLovell
Posted
Bro,
-
Image of your "dropdownButton" for mobile devices is not working. Removing a dot from the url in the js file should fix the problem. Change it so that the url contains only one dot i.e
img = "./images/icon-close-menu.svg";in line 103 and 106 with there respective url. -
Also you don't need to create two element for same background image, Instead you should simply use "picture" for your header background image.
Hope this helps. 😀
1 -
- ibrahim• 40
@Ibyazz3
Submitted
i will be grateful if someone could kindly help me with the background and the mobile view. thank you
AngelusLovell• 245@AngelusLovell
Posted
@Ibyazz3, bro. I m not an expert, still trying to help I tried to read your code but didn't.
Since I didn't check your code, I will simply put out the way I would go about it.
First, Make a container element or a wrapper that will contain the card inside it with Flex and justify it to the center. Making sure the width of the container element is 100% of the screen width.
Second, The card element will contain all the visible components inside it with their relevant width. And Have the Card element with its width in percentage somewhere between 30% to 60% in mobile devices 90% maybe then give it a relevant max-width in units like "rem" (30rem to 60rem).
This will stop your card and its background from flowing outside of the screen in mobile devices and shrink when needed.
Hope that helps.😁
Marked as helpful
1 - Saurabh Mishra• 80
@Saurabh-Mishra04
Submitted
Hello !
It's not pixel perfect but I hope to achieve it soon.
If you notice any errors do mention them in the comment section. Any suggestions on how to improve my code will be appreciated.
AngelusLovell• 245@AngelusLovell
Posted
@xstrafez you did not use the min and max media queries the right way. Which resulted in your design breaking, below 300px.
Personally, I do not use them together in the same queries.
1
