Difficulties on this challenge:
Solution i have used: increase height of my parent card (pass from 780px to 800px on mobile).
Is there a better solution ?
Hi Sek congrats on completing your challenge to answer your question, if there is a better solution? yes there is, instead of using absolute lengths you should look about relative lengths and learn how to use max-width, min-width, max-height and min-height this will help you in the future to make your containers more responsive and will save you a lot of resizing on the media queries I hope that answer your question.
Could I please get some help with making the cards responsive across viewports, rather than setting fixed media queries as I attempted and still failed?
This is my best looking JavaScript ever, I tried a bunch of things within this form validation, any tips regarding the structure, modules, type of functions used in modules, control flow-related comments are much appreciated as well!
Rant: The thing I had most trouble with were the 2 cards and their offset. I couldn't make it responsive even after asking help in the slack channel. I had a blueprint with grid and flexbox, but somewhere along following it I got lost and nothing would work.
I spent several (excited) days trying out very beginner-like non-DRY code to refactoring the JavaScript to its current form, but CSS seems to get increasingly more frustrating as the scattered dots called JS terms begin to connect in my head.
Hi Barney congrats on completing the challenge and to answer your questions:
2.In the case of your JS is alright and the approach you took works, there are two things that I saw that you should check first one is that the function that autofills the inputs should be deleted because users should be able to input and see their own information rather than deleting some existing one, second your cardholder name should have a max length and your card number input doesn't let me delete the card number.
But in general your web page is really responsive and that is something good.
Hello , This my first challenge in Frontend Mentor so if you have any advice to improve the code please tell me so i could update it thank you.
Hi Straw congrats on completing the challenge but I think you have a miss understanding with media queries and how responsive design works. So basically I saw your media query and you set min-width to 1440px, we all know that majority of designs in frontendmentor are meant for desktop devices with 1440px but your media query has a wrong approach I recommend you to search how to set 2 breakpoints in a media query and also take a look on how they work.
Also when making a web design remember to use the developer tools and use the device toolbar and resize your web design and see how it behaves in other devices so you can think of the approach you are going to take for the media queries.
all feedback is welcome
Hi Vishal congratulations on completing this challenge, but I want to give you some advices that will help you to do your challenges more responsive:
• I strongly recommend that in future challenges you use semantic HTML because its going to help other developers read and understand your code more easily. Also I see that you are using a div tag as a main when you could achieve the same purpose with a <main> tag.
• Instead of using translate property learn how to use justify-content and align-items when setting a container to display: flex;
• In both classes head and head1 instead of using a div tag learn how the use case of a span tag that will accomplish better when trying to style specific elements.
• I recommend you to use a better name conventions for your classes you could look in google about BEM for example.
• To make your code more readable I strongly suggest to put your code in a .css file and learn how to use the link tag element.
• Another recommendation dive deep in responsive design (flex, grid, relative lengths, etc...) this will help you a lot in future challenges
I hope these points will help you in the future and don't worry the more you challenges you make the better you will become.
