- What did you find difficult while building the project? Frontend Mentor Provides 2 Svgs in Starter files. I'm facing problem with Mobile background and Desktop background. how can we use both backgrounds to make it responsive and load according to the screen size. I tried but facing many challenges. Which areas of your code are you unsure of? How should I use those backgrounds should I use css and media quaries to show at a particualr screen size or use srcset for perticular screen size. How can we make smooth transition from mobile svg to deskop (vice versa)
Emmanuel Gumede
@Emmanuel-GumedeAll comments
- @manishgtxSubmitted almost 2 years ago@Emmanuel-GumedePosted almost 2 years ago
Hi Manishgtx, Your desktop design works as intended except that your first page loads with input errors displayed even before the user interacts with the form. The errors should only show when the user clicks on 'Next Step' button without filling in the form. You have not implemented a mobile design for the solution even though you have included some media queries in your CSS. Responsive design is paramount in today's web development. With regards to your question about the background image for desktop and mobile, you need to use a media query in your CSS file for desktop devices (assuming 'mobile first' design approach) and change your background image url to point to the correct image.
1 - @FeelshotSubmitted almost 2 years ago
I have done this exercise again, implementing sass as a tool and in less time than it took me the first time I did it. Any comment adds a lot to my learning, thank you very much to all and success. :D
@Emmanuel-GumedePosted almost 2 years agoHi Dani Well done on your solution. There is still a lot you can do to improve your code. You can still achieve the same design with less HTML elements. For example: remove all 'div', 'section' and 'article' elements, and style the 'main' element using CSS Grid. This will drastically reduce both your HTML and CSS code.
With regards to your SCSS; even though nesting is a nice feature of SASS - too much nesting is not a good idea. Try and limit your nesting to a maximum of 3 levels. You can achieve this by, for example: give each grid a separate SCSS block or module.0