Manav
@manav-sharma69All comments
- @M-itsSubmitted 6 months ago@manav-sharma69Posted 6 months ago
Hi! Your solution looks really good.
You would be of great help if you tell us how did you manage to make your solution look same as given in design file (in terms of size)?
0 - @RZXX1Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
did it
What challenges did you encounter, and how did you overcome them?to organize links list
What specific areas of your project would you like help with?Alright, I'm still wondering, is active state an hover or active pseudo class.
and how can I change the background color of link and color of the link text together when I hover over at link's area, but not directly to link text?
please help.
- sorry I set the container width by percent, and messed up this
@manav-sharma69Posted 6 months agoHi! There's nothing wrong in using percentage to set widths. However, if you set widths using em, there's a good chance that you'll be sorry π
Regarding the background and color problem, this should work:
.link:hover
- use this to change the background color of link on hover (you've already implemented this part).link:hover a
- use this to changecolor
ofanchor tag
when user hovers overli
or,.link
.What it's doing is selecting the
anchor
when the user hovers over yourli
element.Descendant combinator - you've used it before in your code
Hope this helps π
0 - @undrthegraveyardSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
- One opportunity to improve is that the final design of the mobile preview is not similar to the original design, for instance, the "Preparation time" section.
- Overall, the spacing around the bullet points could also be improved drastically.
- There were a few challenges that I encountered, one of them was using classes logically in my code. I have been struggling to use classes efficiently, especially in my CSS code.
- On one specific issue, I would really appreciate some help from the community. I was not able to make the color of the bullet points(dots) same as that of their heading.
- For instance, the color of the heading "Ingredients", and its bullet points(dots) should have been the same.
- @ricardo1003Submitted 6 months agoWhat are you most proud of, and what would you do differently next time?
not sure in this project, probably the hover effect i added
What challenges did you encounter, and how did you overcome them?i didnt encounter any big challenge
What specific areas of your project would you like help with?i don't know why but when I try the page on my computer it looks perfect, but when I try on my phone some texts inside the buttons aren't centered for some reason, i even tried changing the centering method but it didn't worked
@manav-sharma69Posted 6 months agoHi! I looked at your code and found out that you're using
align-content: center;
property on the anchor tags.However, this might not be working because, as MDN says, 'This property has no effect on single line flex containers (i.e. ones with flex-wrap: nowrap)'.
And the default of
flex-wrap
isnowrap
.Your problem should be solved if you used
align-items: center;
on<li>
element. Also, there's thealign-self
property which can be used in place ofalign-content
, but I don't really use it and it doesn't always work (read the docs).Relevant MDN links:
- align-content (The line just below Try it Section)
- flex-wrap - See the values section
- align-items
- align-self
Hope this helps!
Marked as helpful1 - @shaunsoSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
Most proud of completing the challenge completely. It would be easy to just leave out one aspect of the challenge, but tenacity is imperative.
Next time, I would ensure that I code for tablets even if the challenge doesn't call for it
What challenges did you encounter, and how did you overcome them?The keyboard navigation.
Looked at the FAQ of actual companies to see how they handled this to discover that
This wasn't intuitive to me at first, but I do understand now.
What specific areas of your project would you like help with?Looking for help on how to refactor the JavaScript in my 'app.js' file. It feels rough & dirty to me and I feel like I could simplify the code.
@manav-sharma69Posted 6 months agoHii! I looked at your JS and HTML code.
Most of your JS code wouldn't be needed if you use the
<details>
element. Also, using this tag would make your markup more semantic and accessible.Here's the MDN link:
<details>
: The Details disclosure elementHope this helps π
Marked as helpful1 - @kavallirSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that I did it all by self. Next time I want to start from the mobile size and then do css for the large screen size.
What challenges did you encounter, and how did you overcome them?Nothing was challenging.
What specific areas of your project would you like help with?I want to know how to do hover visible on phone devices if it is possible.
@manav-sharma69Posted 6 months agoNo, hover is not possible for devices which don't have a cursor.
If you use
:active
state then the box shadow will change as long as the user is somehow tapping the blog component. In other words, as long as user's finger is on the blog component, the box shadow will be different.When the blog component is not "touched", the pseudo class's styles don't apply.
It creates a hover like effect (if that's what you were looking for). Also, take a look at
touch
events.Link for more context: CSS3 hover/tap doesn't work in mobile browsers
Hope this helps βΊοΈ
Marked as helpful0