Responsive Sunnyside agency landing page with HTML and CSS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  Nice work on this challenge! Your solution matches up with the design very nicely! 🙌

  Why do you need to use calc? If it's to centre the lines for the "Learn More" links horizontally, I'd recommend using transform instead. If you added left: 50%; transform: translateX(-50%); that would ensure the line is perfectly centred. If it's for something else, though, let me know, and I'll see if I can help.

  Your accessibility warnings are pretty much all to do with the fact you're missing a main element. I'd recommend clicking the "Learn More" links on the report items to get more information on the issues.

  I hope that helps. Keep up the great work!

  Marked as helpful

  0

  ---

  

  HYDROCODER•555

  @HYDROCODERPosted over 3 years ago

  @mattstuddert Thank you very much for your feedback! Yes, I was trying to center the before pseudo selector of the "Learn More" links horizontally. I didn't think of using transform: translateX(-50%) at first glance and I just pondered around with the left property to center it.

  Then I observed that the left property was dependent on it's width, and I wanted to use calc() to remove this dependency and just use one single variable to both vary the width and center the selector at the same time, but I couldn't understand how to use % with calc; I did try some things with it but it didn't work out and I left it at that.

  I realized now that I can remove this dependency with transform itself and just vary the width without worrying about centering again. :).

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 3 years ago

  @HYDROCODER, you're welcome! Yeah, transform is a powerful property, and it often removes the need for calc in these situations.

  0