@rasel9t6Submitted about 2 years ago
This is my 2nd attempt. I try to fix all previous problem as much as possible. this is only for desktop view. mobile view is quite difficult for me. because i am not an expert. I learning day by day.
Christopher Alvarez
@ChrisesbuenoAll comments
- @ChrisesbuenoPosted about 2 years ago
As advice, I would tell you that in the body you do not add an exact width, normally it is not necessary in most cases since as default it always uses the 100vw available from the browser, and the size that you really want to be able to modify is that of your container, yes you still want to add a width to your body use the following style min-width: 100vw. To center the elements in your body with grid you only need to use two lines, display: grid; place-items: center;
For the mobile view part, you only need to add a single column template to your grid because it is the only thing you need, and accommodate the different parts of your code in the part where it would go, it is a bit more complicated to understand but not difficult, I leave you this game that explains how grid works in a didactic and interactive way: https://cssgridgarden.com/ :D
Marked as helpful0 - @naomichoeSubmitted about 2 years ago
This is my first challenge, so please let me know if you have feedback on better practices. I struggled with filling the image in correctly to the containers width as well as a small gap in between the image and the white container with the info. I figured it out but unsure on the why. Also, unsure on best practice for switching image for mobile vs desktop.
@ChrisesbuenoPosted about 2 years agoHello, good code, as a piece of advice I would tell you to add the following styles to the button, cursor: pointer; font-family: inherit; This is because the correct font is not being applied to the button and changing the cursor to a pointer is a good practice to indicate that it is a button and can be clicked. In the product-info styles I would also add a line-height to make it look more spaced, everything else is quite correct. very good code :D
Marked as helpful1 - @Godspower12Submitted about 2 years ago
Questions:
- How do i add the spacing format in card number?
- How do I prevent my card from shrinking when inputfield is active? Thank you.
@ChrisesbuenoPosted about 2 years agoR-1 You can use regular expressions to validate the input field of the card numbers and thus get the space to be created, you can also use array methods to cut the input string every time four digits are typed and then join them with the space, here I leave you how it would be done with regular expressions, which is how I did it: (your input card number).value = (your input card number).value.replace(/\s/g, '').replace(/(.{4})/g, '$1 ').trim();
R-2 I don't quite understand what you mean by this question.
Marked as helpful0
