Huddle landing page Using CSS FlexBox & Custom CSS

Community feedback

• 

  tediko•6,700

  @tediko

  Posted about 4 years ago

  Hello, Sky! 👋

  Congrats on finishing another challenge! After your nice comment, I saw that you added another solution. Everything works good and responds well but take a look at:

  As you can see in your solution scrollX appear, and we don't want that. This is because you position your .icons wrapper with top and left property but hand in hand with position: relative. This is how I'd reccomend you to do it. Add position: relative to your .content-section wrapper. Then to your .icons wrapper add these styles to position it within that .content-section container (Remember that you will need to change the bottom / right value on mobile) (Personally, I wouldn't use relative / absolute to set this icon wrapper. Instead I'd use flex properties to set this but this is another story):

  position: absolute;
  bottom: 0;
  right: 0;
  

  Additionaly, let's add flexbox to this .icons wrapper. display: flex; gap: 10px;. Now there's a part when you want to style your circle border on this icons. Remove all .icon styles, since we'll apply them on anchor tags instead:

  padding: 2%;
  margin: 0 1%;
  border: 1px solid white;
  border-radius: 50%;
  

  Now to your anchor <a> elements with icons add class (it'd be easier to style them). Now what we have to do is set certain width/height to them and align all items center - like this:

  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  

  Now, take care about borders on it. To new anchor class add also:

  border: 1px solid white;
  border-radius: 50%;
  text-decoration: none;
  

  ---

  Besides that, take a look at:

  • Change the alt attributes for the .responsive-img , .logo-img , as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Additionaly you'd have to add some aria-label on anchors with icons to describe it for screen readers users since icons are treated like there is no content within anchors so it won't be announced.

  Good luck with that, have fun coding! 💪

  11