Design comparison
Solution retrospective
My plan was to add code in stages... 1) html-only, 2) general css, 3) mobile css, 4) tablet css, and 5) desktop css... helped reduce the "ripple effect" of making code changes that might adversely affect previous work.
In hindsight, it might have helped to considered (early rather than later) the need for inner "containers" to group some related UI design blocks.
Note that I did make a few subtle changes to the design, such as changing the font color for the button hover effect.
Find specific css code within "Mobile Design", "Tablet Design" and "Desktop Design" became more time consuming as the number of css lines increased... so I added comments to both html and css files to clearly indicate what the sections were for each of the mobile, tablet and desktop css styling.
What specific areas of your project would you like help with?The one thing I could not figure out what how to control (remove?) the opacity on the second divider (that partially covered the last section) and, similarly, how to control the opacity of the button in the last section.
Join 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