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?
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: 350px
img 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.