@ElofatishSubmitted 6 months ago
Latest solutions
Responsive Four Grid Card.
#accessibilitySubmitted 5 months agoNone...But I am open to any suggestions.
Front-end Mentor || Responsive Product Review || Font Variables || CSS
#airtableSubmitted 7 months agoFont variables.
Responsive Recipe , list, flex and REM as font defaults
#accessibilitySubmitted 7 months agoFont size at different screen sizes. CSS code best way to approach it and how to create a clean code
Non-Responsive landing Page in HTML and CSS, Flexbox and margins.
#cube-cssSubmitted 8 months agoFont selection...Which fonts are standard practice. Responsiveness... Best way to approach it.
Latest comments
- P@SuhasPatnaikSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Getting the supervisor and calculator card to the vertical center of their respective columns was challenging for me. Also, feel like the CSS is pretty crispy on this project, really proud of that.
What challenges did you encounter, and how did you overcome them?Getting the supervisor and calculator card to the vertical center of their respective columns was challenging for me. My solution:
grid-row: 1/3; align-self: center;Code explanation:
- 1st line of code says that our element occupies the 1st and 2nd rows.
- 2nd line of code ensures that the element is positioned in the vertical center of the assigned space.
- Ensures it doesn't stretch fully from the top to the bottom of these rows, hence only taking up the necessary height for its content.
- Just general feedback in terms of best practises wherever needed would be great.
- I know from a web accessibility standpoint a lot of improvements can be made. Will be taking care of that in future projects.
- @bashiirabdullahiSubmitted over 1 year ago
- @xStephxSubmitted 7 months ago@Sirch9Posted 7 months ago
Nice work! I hope my feedback makes sense to you, as I’m not as skilled as you are. I noticed that your navigation container isn’t quite responsive between widths of 320 and 425 pixels. The elements look a bit "squashed" and don’t display well.
I understand the design was provided this way, but I think a burger menu would be a much cooler solution.
1 - @chrisvn1808Submitted 11 months agoWhat are you most proud of, and what would you do differently next time?
I appoached this project different with previous projects.
I plan ahead HTML, CSS structure, what semantic HTML tag should I use, what utility classes will help me achieve consistent look.
I had trouble with how to make the full width image on small screen sizes, but managed to achieve it with negative margin.
Creating a system like Cube CSS makes writing CSS more fun and rewarding.
What challenges did you encounter, and how did you overcome them?I used this trick to achieve full width image on small screen sizes.
What specific areas of your project would you like help with?.recipe__image { margin-left: calc(-1 * var(--space-md)); margin-right: calc(-1 * var(--space-md)); margin-top: calc(-1 * var(--space-md)); }Any feedbacks on the project would be valuable to me and be appreciated. Happy coding!
@Sirch9Posted 7 months agoNice, I too struggled with making the image full screen in small screen and I gave up. Besides using those negative margin and "cal()" , Is there a simpler way to accomplish the task in css.
0 - @Gemy77777Submitted 8 months ago
