Design comparison
Solution retrospective
Hi, If you Check out my code/site I would be glad if you notify me of the flaws in the design Which sections of my code are unnecessary? Have i successfully approached flexbox?. In sections where my design breaks what other alternate approach would you suggest.
Community feedback
- @PJMantossPosted over 4 years ago
Nice job! But you need to revise the following: 1-the 'try it free' button in the header does not resemble the design 2- The font-family for the h1 tag in the first section is not the same for the design 3-You used the same background illustrations for both mobile and desktop views. The background illustrations in mobile view are supposed to be different than in desktop. 4. You need to work more on the mobile version. Fonts are too tiny and some other elements like the input and subscribe button are not well positioned. Nice job once again.
2 - @safrukPosted over 4 years ago
1 Thanks! Totally missed that 2 Stat section is open sans. Rest all headings are Poppins. Haven't I got it right? 3 I have only these 3 background illustrations. I guess they have updated the starter files to include separate ones for mobile. Will be sure to check that out. Thanks for notifying 4 I'll surely look into That. I should try mobile first as well to get it right. Right now I am stuck with desktop first approach.I have become too habitual and comfortable with desktop first approach
Really appreciate your honest feedback. Hope to hear more after I fix these problems. Thanks!
0@safrukPosted over 4 years ago1 Fixed!
2 Checked again. Seems Fine
3 Background illustrations are same for mobile and desktop. Had included curved sections for desktop and mobile originally.
4 Fixed!
Question: I have changed my buttons slightly.Earlier I used padding for the buttons. But for some reason there were issues. The button in the header and cta section, although same, were displayed differently and I have no idea why.So now I set fixed width buttons(Inspired by ksenius amazing solution for this challenge). Which approach is better and why does this behavior occur.I would be glad if anyone could enlighten me about this.I have been scratching my head searching everywhere but not satisified with the answers I found.
0@mattstuddertPosted over 4 years ago@safruk hey Safa, nice work on this challenge and it's good to see you've made updates. I'm not sure what the buttons looked like before, but they're looking good now. Setting a
widthor usingpaddingwould both be viable options. What was the issue?0@safrukPosted over 4 years ago@mattstuddert despite having same style the button in header was displayed differently. I still haven't figured out why. I never faced this issue before. Also both Chrome and Firefox browsers showed the button as intended. Both padding and width are viable options yet the button was stretching on my mobile(both justify-content and align-items are set to center) . That's why I decided to stick to the width button. Thanks Matt for your feedback!
0@mattstuddertPosted over 4 years ago@safruk very odd! Setting a width, in that case, is absolutely fine. Keep up the great work!
0
Please log in to post a comment
Log in with GitHub
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