Design comparison
SolutionDesign
Solution retrospective
I had issues with the social icons. It was difficult for me to place them correctly. So I just gave it a absolute position and placed them manually. Any kind of tips and comments are appreciated.
Community feedback
- @GeorgeCaldarescuPosted almost 3 years ago
Hi. Regarding the social icons, try to use this format and will easily work style it with flexbox
<main class="main-container"> <img mockups.svg> <div class="text"> <h1> Title </h1> <p> text </p> <button></button> <div class="social-links"> <a> </a> <a> </a> <a> </a> </div> </div> </main>
Some other suggestion:
- start with mobile style, will be easy to work and then when you are going to create the desktop one you need only a few changes
- pay attention at the text in mobile version, is not easy to read
- the social icons must be a link and not list
Good luck!
Marked as helpful1 - @DeveloperLucaJPosted almost 3 years ago
Looks good! Just nest your icons in a div and position the div using grid or flexbox on the parent element. If you like you could add margin, too.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord