I did not come across any issues while building this project. The area of my code that I am unsure of is that I did not have to write any media query for the mobile view to make my design fit the mobile view.
My question is, am I missing anything?
Nice solution!
I think you did everything right - his component can be done without media queries. The only thing that can be changed - height: 100vh in body to min-height: 100vh. After that this component will not be partialy hidden on mobile horizontal screen.
I take immense pride in having successfully consolidated my understanding of foundational CSS properties, including but not limited to color, font-size, and background-color. Additionally, I have made significant strides in acquiring knowledge about fundamental HTML elements such as img, p, h1, and span. This proficiency has not only enhanced my technical skills but also equipped me with a robust foundation to further explore the intricacies of web development.
What challenges did you encounter, and how did you overcome them?I expanded my expertise by delving deeper into advanced CSS concepts, specifically focusing on the nuances of CSS shadows and the strategic application of margins to effectively manage whitespace between elements, thereby refining my ability to craft visually appealing and harmonious user interfaces.
What specific areas of your project would you like help with?Please let me know if i could improve my code in any way.
Nice solution!
This component can be more responsive on a mobile screen by adding width: 100% to the main image.
Feel free to share any tips that can help me improve.
Nice solution!
I have ideas to improve the mobile screen view.
article class="card" width: 350px to max-width: 350pximg class="hero-img" width: 350px to width: 100%My first Junior project!!!!
I felt so happy after making this :)
Could anyone please share their thoughts on areas where I could improve?
Nice solution, congrats!
I have two independent ideas to make this page a little different)
For header, main and .third-section apply max-width: 1150px; margin:auto.
Add justify-content: space-between to .third-section and change item's styling.
In terms of semantics, .third-section must be inside main. Also, you don't need to use article to make a burger menu. You can reuse ul of header.
I will be glad for any feedback.
Hi, good job!
Component is partialy hidden on the mobile horizontal screen. This can be fixed by changing height: 100vh to min-height: 100vh in body. You can also add paddind to body to add space around the card.
I decided to make an update to this project after gaining some feedback. I am still open to any feedback and advice. Thanks a lot
Great solution!
I have one suggestion for improvement - add object-fit: cover to the main image. It may be more responsive.
Is there a better way to vertically center elements?
Hi! You've centered the component using position: absolute. It works. But common methods are display: flex or display: block with additional properties for body. They give more opportunities in large projects.
Everyday is getting harder lol please comment down what i did wrong
Congratulations on completing this challenge!
Card information is hidden on the mobile horizontal screen. This can be fixed by changing height: 100vh to min-height: 100vh in body. And you can also add padding-bottom: var(--spacing-md); to each card for large screen.
please provide the Feedback
Hi, good job!
You can also apply min-width to the .parent div so that the <a href="#">Change</a> does not stick out of the .plan div when the screen width is less than 250px.
Your feedback is incredibly valuable to me. If you spot any clever tips or techniques that could have been applied, I'd be grateful to hear about them. Your insights are instrumental in my journey of growth and improvement. Thank you for taking the time to share your expertise!
Good job!
Inside body in CSS you can place padding to make some space around the component on a small screen.
A lot of unnecessary CSS to get it responsive but I feel like the final result is fine. Will probably update once I can see the side-by-side screenshots as I'm not sure my overall shape was particularly close.
Any and all CC welcome, let me know how I did!
Good job!
But when I resize the browser, there is no image on the small screen, just the alt text. You can try placing the image-product-mobile.jpg inside the figure in the html file.
Kindly give your comments
Good job! I would change max-width in @media screen from 600 to 614 to prevent buttons breaking.
