@tomazcxSubmitted over 2 years ago
If anyone has any idea of how I can improve this project, please contact me.
Thank you for checking my project.
Tarek Mo
@tarek-moAll comments
- @tarek-moPosted over 2 years ago
It seems like you forgot the background in the "Boost your links today" section as well as the shorten link section. But everything else looks good man!
1 - @purnimakumarrSubmitted over 2 years ago
Hey, if your review my solution please leave any comments you have.
There is one thing I coudn't figure out, the product image has a size of 332 X 332 px but the div containing it has a height of 336px so there is some unnessary gap below the image. It isn't visible but when you hover over the image and see the overlay effect you can see the gap below the image. There is no extra padding or margin in the element so, I can't understand why that is happning. If someone could help me with that, it would be great help.
Thank you.
@tarek-moPosted over 2 years agoTo remove that space under your image use
display: blockon your image tag, the reason behind this issue is that images are treated as text so the bottom is to accommodate for those pesky: "p,q,y,g,j" letters.1 - @claudiabdmSubmitted over 3 years ago
I feel like my JS code is a bit messy and could be better organized which I think it could be improved by dividing the code into components like frameworks do. I also tried to make it more accessible and added aria attributes so screen readers can announce the game result.
- @Evavic44Submitted over 3 years ago
This card was aligned using CSS flexbox which required a large chunk of CSS code to work, would prefer to have a simple solution to design this. If you have any recommendations, do well to let me know. Thanks
@tarek-moPosted over 3 years agoHey Victor, I've read your code and this is what i think could be improved: the section with the class 'container' isn't perfectly centered vertically, and that's because you added a margin top of 10.5rem. Instead what you can do is set this section to position absolute and type top: 50%; left: 0; transform: translateY(-50%) which will center it vertically in all devices
Marked as helpful0 - @DiegoVelazquez60Submitted over 3 years ago
Hi! This was my third challenge :,). If anyone could give me feedback I would appreciate it a lot! n.n
@tarek-moPosted over 3 years agoHello DIEGOVELAZQUEZ60,
Everything is looking good, one thing I've noticed (and you probably did aswell) is the annoying sidescrolling that was caused in your page. You can add
overflowX: hiddenin your Css body selector and that'll fix this issue. Good Luck!1 - @AlMonSubmitted over 3 years ago
Hi there! 👋🏻
The stack for this challenge was as follows:
- ⏭ Next.js
- ⚛️ React
- 🍃 TailwindCSS (w/JIT mode enabled)
I look forward to hearing your feedback on what I could do to improve my approach and/or the look of my challenge solution!
@tarek-moPosted over 3 years agoI thought react is only used for big web apps, have no experience with it since I'm still learning javascript. But hey, your website is looking professional. Good job.
1 - @mdagudoSubmitted over 3 years ago
Hello, I would appreciate some feedback :) I struggled with making the page responsive!
@tarek-moPosted over 3 years agohello, you can use Bootstrap's grid system to make this easily responsive. If you never used Bootstrap and don't want to yet. you can use flex wrap and set it to wrap maybe? or use display grid with the minmax function. I've been using Bootstrap a lot lately so i kinda forgot how i used to layout with only CSS LOL. good luck!
0 - @matthew-ioSubmitted almost 4 years ago
Any feedback is appreciated, especially on the VR section, I struggled with that the most.
