Skip to content
OverviewSolutions
2
Comments
3
P
mi souto
@mileine

All comments

  • Alice•100
    @alicemac93Submitted almost 4 years ago

    Hi guys thanks for feedback, I have basically one question:

    How to make the socials hover to change color at the same time? now its divided into the icon and to the circle? Why doesnt it apply to everything in the div?

    Any other feedback appreciated!

    Thanks!

    Alice

    Fylo dark with Bootstrap

    2
    mi souto•105
    @mileinePosted almost 4 years ago

    Hey, Alice! Great work! 😊

    This is how your HTML code is structured:

    <div class="circle">
    <a href=""><i class="fab fa-facebook-f"></i></a>
 </div>

    I noticed you're changing the circle color on hover using .circle:hover. That's working as expected.✅

    Your <i> icon element is not updated because it's inheriting the <a> element. And the <a> element only changes when hover is on itself. Probably because it's inheriting this other rule that is applied on your <a> element on hover:

        color: #0056b3;

    (note that the blue on the symbol is different from the blue on the circle)

    You want the child element <a> color to be updated at the same time as the circle so you need to add a new rule for this element color to change when the hover is on the the parent element - <div class="circle">.

    This rule would be something like this:

    parent:hover child {
       color: hover-color
}

    I hope this helps. Happy coding! 💻✨😊

    0
  • Sami ur Rahman•370
    @qsrahmanSubmitted almost 4 years ago

    The app was a joy to work on ✌️. However faced the following problems:

    1. Could not find a way to change the circle radius on hover 😩
    2. The drag and drop made the code unnecessarily complicated 😉 and also It will not work on mobile.

    Any help in resolving the above shortcoming will be appreciated.

    Happy coding 💕

    Todo app

    6
    mi souto•105
    @mileinePosted almost 4 years ago

    Awesome!

    About changing the circle border color on hover, you can try changing it on its parent element <li> hover. =)

    0
  • Sami ur Rahman•370
    @qsrahmanSubmitted almost 4 years ago

    The app was a joy to work on ✌️. However faced the following problems:

    1. Could not find a way to change the circle radius on hover 😩
    2. The drag and drop made the code unnecessarily complicated 😉 and also It will not work on mobile.

    Any help in resolving the above shortcoming will be appreciated.

    Happy coding 💕

    Todo app

    6
    mi souto•105
    @mileinePosted almost 4 years ago

    Great work! =)

    Your solution does look great and your attention to details made me look to my solution in a different way so I could improve it too.

    I think it's impressive you implemented the drag and drop yourself, but maybe using a library would be a way to solve the issue with mobile devices. I used React Beautiful Dnd by Atlassian - with support for mobile devices - and I'll probably use it again on other projects because I really like the result.

    React Beautiful DnD https://github.com/atlassian/react-beautiful-dnd

    How to Add Drag and Drop in React with React Beautiful DnD https://www.freecodecamp.org/news/how-to-add-drag-and-drop-in-react-with-react-beautiful-dnd/

    2