Mitsrael Souza• 130
@M-its
Submitted
Manav
@manav-sharma69
All comments
- Manav• 390
@manav-sharma69
Posted
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 - Jerry Potter• 50
@RZXX1
Submitted
What 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• 390@manav-sharma69
Posted
Hi! 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 changecolorofanchor tagwhen user hovers overlior,.link.What it's doing is selecting the
anchorwhen the user hovers over yourlielement.Descendant combinator - you've used it before in your code
Hope this helps 🙏
0 - Shiv• 350
@undrthegraveyard
Submitted
What 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.
What challenges did you encounter, and how did you overcome them?
- 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.
What specific areas of your project would you like help with?
- 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.
Manav• 390@manav-sharma69
Posted
Hi! You can add colors to bullet points by using the
::markerpseudo-element.Here's the MDN link:
::markerHope this helps!
Marked as helpful
0 - Ricardo• 440
@ricardo1003
Submitted
What 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• 390@manav-sharma69
Posted
Hi! 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-wrapisnowrap.Your problem should be solved if you used
align-items: center;on<li>element. Also, there's thealign-selfproperty 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 helpful
1 - shaunso• 30
@shaunso
Submitted
What 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• 390@manav-sharma69
Posted
Hii! 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 helpful
1 - kavallir• 50
@kavallir
Submitted
What 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• 390@manav-sharma69
Posted
No, hover is not possible for devices which don't have a cursor.
If you use
:activestate 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
touchevents.Link for more context: CSS3 hover/tap doesn't work in mobile browsers
Hope this helps ☺️
Marked as helpful
0
