@ShoaibShuja
What are you most proud of, and what would you do differently next time?
I was able to put the image over the nav bar and the hero section and limit the size of the nav bar as not to get in the way of the rest of the grid.
What challenges did you encounter, and how did you overcome them?
How to add an arrow to popover and I ended up making the arrow positioned relative to the hamburger menu.
What specific areas of your project would you like help with?
Any general feedback is welcomed .
@ShoaibShuja
Posted
How were you able to design so perfectly? I really need some tips especially on how to match the design according to the given design images.
@danielmrz-dev
Submitted
What are you most proud of, and what would you do differently next time?
🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊
🛠️ Built with:
Being able to finish this project makes me proud. The first time I tried I just couldn't figure it out the multiple filter logic. A few months later I decided to give it another shot and this is the result. And I got to use Vite, Axios and ESLint as a bonus 😁
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome 😊
@ShoaibShuja
Posted
Mr. Daniel please tell me how you can match the design perfectly. Is there a secret?
@sara11211
Submitted
What specific areas of your project would you like help with?
if anyone has an idea why the profile isn't centered ?
@ShoaibShuja
Posted
Also your Github repository's link is broken. Fix it my friend
@sara11211
Submitted
What specific areas of your project would you like help with?
if anyone has an idea why the profile isn't centered ?
@ShoaibShuja
Posted
To center the box perfectly copy these to your CSS file:
body {
width: 100%;
min-width: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Good Luck.
Marked as helpful
@jeevan-v-jijo
Submitted
What are you most proud of, and what would you do differently next time?
Things that I am proud of
-Learnt about media queries
-Learnt about center a div, vertically and horizontally in a screen
-position and display properties
What challenges did you encounter, and how did you overcome them?
Challenges encountered
-positioning
I overcame it by researching online resources
What specific areas of your project would you like help with?
I want to know if my positioning and spacing methods are appropriate or not? If not how can I improve? what are the best practices.
@ShoaibShuja
Posted
First of all for spaces you can use 1rem instead of like 1px which would apply more space at once because 1rem is equal to 16px and this way you can examine different spaces quickly. Also dont forget that you can use an extra one digit decimal with rem like .5rem which is basically 8px to match designs more effeciently.
Also if you want to put your elements perfectly centered inside the body element instead of using position use flexbox in body element. This way you don't have to worry about positioning when using media queries and applying for smaller or bigger devices. This tip is optional but I believe is a better approach. To test this remove the position, top, left and transform from your .main-dev and the media queries and copy following code to your CSS file:
body {
width: 100%;
min-width: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
I wish you good luck my friend.
@SJGit15
Submitted
What are you most proud of, and what would you do differently next time?
I am most proud of the result and summary sections. Next time, I would try to write less lines of css code.
What challenges did you encounter, and how did you overcome them?
I had a bit of difficulty getting the background color of the result section until I realized that it was provided in the style guide.
What specific areas of your project would you like help with?
Efficiency when it comes to code.
@ShoaibShuja
Posted
Amazing job my friend a here is a quick tip for you to perfectly center your .card inside the body element. First remove the margin-top property from your .card then add the following lines of code to your CSS file:
body {
width: 100%;
min-width: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Everything else looks super clean and perfect. Good luck.
@NameRectified
Submitted
What challenges did you encounter, and how did you overcome them?
For me the hamburger icon was the toughest part. Even in the final solution I did not get a good output for it. will be glad if any one can give suggestions on it.
Thank you
What specific areas of your project would you like help with?
With the hamburger icon
@ShoaibShuja
Posted
The repository link is broken. Fix it and we might take a look at your code to give suggestions.
What are you most proud of, and what would you do differently next time?
Getting the qr code to the middle of the screen. Next time I know how to use flexbox to tackle this.
What challenges did you encounter, and how did you overcome them?
Getting the qr code to the middle of the screen. Using and understanding how flex allows for the movement of divs in the x and y axis.
What specific areas of your project would you like help with?
Nil
@ShoaibShuja
Posted
The image element is not displaying and the only issue is that you forgot a . at the beginning of the img's src and to fix this issues change the image's src to src="./images/image-qr-code.png".
And also to center your .container perfectly inside the body element copy these lines of code to you CSS file:
body {
width: 100%;
min-width: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Marked as helpful
@khalidmir2674
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that I am successful in creating this project
What challenges did you encounter, and how did you overcome them?
Faced challenges while designing for mobile screensize.
What specific areas of your project would you like help with?
On mobile screensize, I am still not able to center all the testimonials. Any feedback guidance is highly appreciated.
@ShoaibShuja
Posted
Try and set the main's grid-template-columns: repeat(1, 1fr); and also do the same for rows and if it didn't work try adjusting the size of each section element simultaneously.
Marked as helpful
@sayyedaaman2
Submitted
What are you most proud of, and what would you do differently next time?
responsive design
What challenges did you encounter, and how did you overcome them?
grid system
What specific areas of your project would you like help with?
typography
@ShoaibShuja
Posted
Amazing job my friend and the layout seems absolutely amazing but the page is overflowing a bit and even though you have centered the .wrapper inside the body it was done through setting margins but the better approach would be using flexbox and removing the margins to fix the overflowing issue.
Just in case these lines of code will help you center the .wrapper inside the body element.
body {
width: 100%;
min-width: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
And also, if you have an issue with putting the attribution (which says who coded the project) to the very bottom of the webpage use the position: absolute; property and then set the bottom: 0;.
I wish you best of lucks my friend. 👍
@colombeg
Submitted
What are you most proud of, and what would you do differently next time?
I only used basic HTML and CSS in order to realize this project but I will use diverse libraries or methodologies for future projects.
What challenges did you encounter, and how did you overcome them?
I used media queries for the mobile format of the challenge.
What specific areas of your project would you like help with?
I would like to have a better understanding on how I can improve my code and how I can create responsive projects or apps.
@ShoaibShuja
Posted
Amazing job my friend, the code looks good and clean but the .container doesn't seem to be perfectly centered like what the design asked for. You can achieve it by removing the margin-top property from .container and copying these lines of code to your CSS file:
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
And also, don't forget to use font-family to make text look better or according to design.
Have a nice day. 👍
@patricknoni22
Submitted
What are you most proud of, and what would you do differently next time?
working with css flex
What challenges did you encounter, and how did you overcome them?
media quarry responsiveness i use flex directions : column on mobile and flex direction :row on desktop
What specific areas of your project would you like help with?
media quarry and css flex
@ShoaibShuja
Posted
Amazing job my friend and here are some suggestions for you to make your code better:
First of all wrap all your code in a section or div element especially if the design is basically covered in a box.
Also don't use section element unless you are covering a bunch of elements which depends on each other or are related
Also, in this particular challenge it would have been better to use a img element inside your div instead of putting it as the background
Another thing if you want to perfectly center a box inside the body element use these lines of code:
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 650px) and not min-width. min-width applies the media query to devices which have a width more than the one you set the property equal to.You code was overall good and simple. So keep learning and I wish you best of lucks.