Flexbox and social link hover

Community feedback

• 

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  How can I simultaneously hover the social links a border and a logo and there is a problem to my code what advice you will give?

  This is happening because you used border-radius = 50% on <li> instead of the <i> element. Actually on your code, you used CSS on <li> instead of <i> this is what you have :

  li {
        border: solid 2px #fff;
        background: none;
        padding: 0.2em;
        padding: 0.4em;
        width: 40px;
   }
   
     ul li:hover, i:hover{
        border-color: hsl(300, 69%, 71%);
        color:  hsl(300, 69%, 71%);
  }
  

  remove that and use something like :

  i {
        border: solid 2px #fff;
        background: none;
        padding: 0.2em;
        padding: 0.4em;
        width: 40px;
   }
    
       i:hover{
          border-color: hsl(300, 69%, 71%);
          color:  hsl(300, 69%, 71%);
       }
  

  it'll work.

  Good Luck.

  Marked as helpful

  1

  ---

  

  Troy•170

  @troy03Posted over 2 years ago

  @EtnoPolino thank you this a big help!

  0

  

  P

  Serhii Orlenko•345

  @grifanoPosted over 2 years ago

  @EtnoPolino Hi, how do you past the code within code-block? Look’s very nice 👍

  0

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  @Grifano use the triple tilde ```` before and after your code.

  1
• 

  P

  Serhii Orlenko•345

  @grifanoPosted over 2 years ago

  Hi Troy 👋 You are doing a great job. Keep going 👍 About your issues with these icons. My suggestion is:

  1. make your <li> to display: flex with align-items and justify center.
  2. Also, Remove all paddings from <li>, and set fixed sizes for both width and high to 40px.
  3. flex-grow set to 1 for anchor element, as they had to fill all space.
  4. font-style: normal to <i> as they have italic style by default. And one more tip, try to play with these elements using the development tool in your browser. In this case, you get fast results and then get to write these changes to your code. Be careful, after you save your code, all the changes, that you’re playing in the browser, will be gone. Because after you save, the browser will reload your page. Keep going, good luck 👍

  1

  ---

  

  Troy•170

  @troy03Posted over 2 years ago

  @Grifano Omg thanks for feedback thats a nice tip going to commit changes

  0
• 

  Troy•170

  @troy03Posted over 2 years ago

  Thank you guys I already push a changes and I realize is okay to commit mistake and theres someone who will help you. Anyway is there any courses or resources to learn responsive design I already responsive but only for 720px.

  0