i would be so thankful if someone explains to me how to center elemnts vertically like should i make a margin for the box containing the 3 child boxes, should it be in %, else what better approaches can i adapt
Latest solutions
- Submitted 8 months ago
Arch Studio Website - Vite - React - TailwindCSS
#fetch#react#vite#tailwind-css- HTML
- CSS
- JS
- Submitted 8 months ago
Space Tourism Website - React - Vite - TailwindCSS
#react#tailwind-css#vite#fetch- HTML
- CSS
- JS
- Submitted 8 months ago
URL Shortening Api Master - React - Vite - Tailwind
#react#vite#tailwind-css- HTML
- CSS
- JS
- API
- Submitted 8 months ago
REST Countries API - Color Theme Switcher - HTML - TailwindCSS - JS
#tailwind-css#fetch- HTML
- CSS
- JS
- API
Latest comments
- @ArijTradSubmitted 6 months agoWhat specific areas of your project would you like help with?@cristianccggPosted 6 months ago
Hi there. Try to understand Flexbox or grid by watching a YouTube video and I am sure you will be able to fix the layout correctly. That way it will be very easy to center are place items where you want them quickly. Good job!
0 - @Hackerbot24Submitted 8 months agoWhat are you most proud of, and what would you do differently next time?
Completing this challenge.
What challenges did you encounter, and how did you overcome them?i encounter chanllenges in almost all areas but i was persistent
What specific areas of your project would you like help with?anywhere i am found wanting i will love to learn and the theme it does not change.
@cristianccggPosted 8 months agoHi @Hackerbot24. Good job, it looks great! There are different ways to manage the theme to change but the one I used was using SASS. I am currently using only tailwindCSS to manage the styles in my projects but I am sure I used SASS when finishing this challenge. SASS allows you to set two or more different themes like two different variables similar to javascript and you can toggle them when pressing the button. It is very easy to learn from a YouTube tutorial.
0 - @0653JericoSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud that I was able to nearly copy the same design provided by Frontend Mentor though I had to use a lot of complicated and maybe unnecessary codes to attain it. I would make sure to study more to learn how to minimize my code.
What challenges did you encounter, and how did you overcome them?I had difficulty when my container's height keeps extending when the view is adjusted or scrolled down. I searched through the internet in order to find out what was wrong, I only read and read but nothing until I tried to experiment on it myself. Thanks to the answers from stack overflow which says its most likely the height property, I was able to accomplish it. From height: 51vh; to height: 100%;.
What specific areas of your project would you like help with?I would like help with the spacings and how to place good values in the margins, paddings, widths and heights. If possible, I would also like to learn how I could minimize my code by using only the necessary properties. I also want to understand how the min-width and max-width works in the media queries.
@cristianccggPosted 9 months agohI @0653Jerico. Good job, looks great. Regarding your comments about minimizing CSS, you can try using some CSS frameworks like Bootstrap or Tailwind. I have used both but in my recent projects I used Tailwind mainly because it renders the CSS classes and removes the ones you are not using which makes the code more solid and less heavy. Give it a try and that will help you a lot and save you some time, mainly on the responsive things. It could be hard at the beginning but once you understand it, it's very useful. There are lots of YouTube tutorials to begin with.
Marked as helpful0 - @IvanoCroSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of everything.
What challenges did you encounter, and how did you overcome them?I did not encounter any challenges.
What specific areas of your project would you like help with?I would like to get feedback on my code.
@cristianccggPosted 9 months agoHi @IvanoCro, Your code and design look great. The only minor detail would be to put the same padding that you have on the sides on the top. It's a minor detail but it would make the design look much cleaner visually. Other than that it looks great, good job!
0 - P@Masseh2025Submitted 9 months agoWhat are you most proud of, and what would you do differently next time?
The thing I'm most proud about is how nice the heading looks when you hover over it. The thing I would do differently next time would probbaly get a understanding of typography as I really dont know much about it.
What challenges did you encounter, and how did you overcome them?The cllanges I encountered was styling the learning button as it looked weird when I tried to style it. I overcame it by setting it flex start.
What specific areas of your project would you like help with?The specific areas of my project I would like help with would be the the shrinking of the typography when the screen gets smaller. I read some tutorials on css clamp but I'm really not sure if I correctly implemented it so feedback on that area would be pretty helpful.
@cristianccggPosted 9 months agoHi @Masseh2025. Your design looks great, good job. A simple way to make the text responsive is by using "rem" or "em" instead of "px" when setting the font size. Try it out and you will see how the text grows and shrinks depending on the size of the screen.
0 - @GraceMCodesSubmitted 9 months agoWhat challenges did you encounter, and how did you overcome them?
I am having trouble accessing the designs so I had to think outside the box. Any help will be much needed.
What specific areas of your project would you like help with?In the footer section definitely need help with the css display properties
@cristianccggPosted 9 months agoHi @GraceMCodes. The main issue I can find is that you need to set a width and height for the container with the class "shadow" which is the one nesting the whole design. That will make the box smaller and will fix the design.
0