HTML and CSS and some media query. one inner style.

Community feedback

• 

  IRVINE MESA•1,855

  @DrMESAZIMPosted over 2 years ago

  Hi @semi26

  I noticed that there is need to remove some text decoration on the following classes

  btn btn-change btn btn-change

  To do that simply add this property on line 6 inside the file style.css

  text-decoration:none

  Marked as helpful

  1

  ---

  

  Buddyyy•40

  @semi26Posted over 2 years ago

  @DrMESAZIM Hello, thank you for the feedback. I thought there was an underline in the design and I wanted to make it as close as possible. Perhaps the card (container) is too large on small devices or the button has a strong shadow. Do you have any suggestions? thank you again I really enjoy spending time on this platform. I like the contribution. I like being a part of the community. Anything I can do to improve my front-end skills. 👍

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, Raul! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Your solution looks pretty good! Also, well done on leaving the alt empty to all decorative images! 👏

  There are still some things that can be improved.

  • I highly suggest never using inline styling. It's not reusable and hard to maintain. Also, it has very high specificity. So, my recommendation is always to put all the styling into the external CSS.
  • Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.
  • On mobile view (375px width) I recommend adding some padding on body to prevent the card from touching the browser's edges.
  • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users that navigate this website using keyboard (by using Tab key) know where they are on the page.

  I hope this helps! Keep up the good work! 👍

  Marked as helpful

  1

  ---

  

  Buddyyy•40

  @semi26Posted over 2 years ago

  @vanzasetia Hello Vanza, Thank you for taking the time to view my solution. I am very honored to be a part of this community. I look forward to growing my front-end skills. I did correct the errors. I moved the inline style to the CSS file. I manage to add a type for all the buttons. I'm not sure if I corrected the mobile view. The card was touching the side of the screen but I adjusted it to fit properly I'm not sure if I can make the card any smaller. for the focus-visible, I have to take some time to look up what that means and how to use it. Thank you again I wanted to inform you of the updates I made.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @semi26 You're welcome! Thanks for the info!

  You can remove the margin: 99px from the container and add some padding on the body element to prevent the card from having full width and height on small screen sizes.

  For, the focus visible styling, you can use the outline property. Usually, a solid black outline would be good enough. Just make sure that it is stand out and is clear to see.

  Marked as helpful

  1

  

  Buddyyy•40

  @semi26Posted over 2 years ago

  @vanzasetia Hello, I have been working on the project and I made some adjustments. I'm trying to come up with the best solution. When I removed the margin: 99px and added some padding it didn't readjust the container to fit on a 375-width mobile view. I started taking the project apart and putting it back together. I could upload my most recent changes? I added more to the @media for a bit more responsive. I want to get it as close to the design before moving on to the next project. Thank you again for the support.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @semi26 I took a look at the site and my suggestion is to set a max-width instead of width. The only thing that the card needs to be responsive is a max-width (no media query and no width). This way, the card allows to grow however, it prevents the card from becoming too large on wide screen.

  Marked as helpful

  1

  

  Buddyyy•40

  @semi26Posted over 2 years ago

  @vanzasetia Hello, I hope all is well. I did manage to change the width to max-width. It really looks good on mobile view. I did change the margin on the button and the "price" container. I think it looks very similar to the design. Thank you so much for all the suggestions. I wanted to add the accessibility before moving on to the next project. Thank you again happy coding.

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your card is covering the whole screen on smaller devices, give a margin left and right on smaller devices to avoid your card from spanning the whole screen.

  • there is also so much box shadow on the button.
  • you also forgot to add a box shadow to your card.

  Besides good job👍 Keep coming👍

  Marked as helpful

  1

  ---

  

  Buddyyy•40

  @semi26Posted over 2 years ago

  @Kamasah-Dickson Thank you so much. I manage to correct the errors. I forgot to add a comma on my container card (box-shadow) lol. For the button, I'm not sure if I tone it down but I did go down 5px. I also corrected the margin for small devices. Thank you again. I'm really excited to keep learning. I am also new to this platform but I love the whole contribution, resources, and the community. 👍

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @semi26 You are welcome bro, happy coding👍👍

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @semi26 You are welcome bro, happy coding👍👍

  0