Hey guys!
Thank you for being here! This is my second challenge and i'm really proud. This is my first coding a mobile-first on my own !
I studied a lot to try be more independent in projects, but i know the importance of work in a team and ask for help.
Anyways, hope you enjoy!
Waiting your feedbacks!
Hi Vanessa
Great work! One thing I would change is media query break point. Instead of 1440px I would use something around 700px or 800px, so it's not growing to big. You can try it 😉
This is my first attempt at the solution for this challenge. It does the trick but I think the code should be better in regards to the position of the box and the alignments, so any feedback in that aspect will be appreciated.
Hi,
Great work, but instead of using position relative to center your component, the easier way is to use flexbox or grid.
Flexbox solution
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Quick HTML CSS build, I am looking into using clamp() for the font-size and card width and height, curious to know how other people have achieved this.
I also have some strange behaviour with the img when changing the viewport width, which needs some tidying up.
Please take a look, any feedback would be greatly appreciated, thank you :)
Hi
Strage behaviour with your image happend because in your html file you have width and height set on the img tag, just remove it.
The sizing and positioning were the hardest to get right, is there and easy way of doing this?
Hi,
For positioning the easy way is to use flexbox. Instead of using margin in container to positioning, just set min-height:100vh in your body selector so height of this element is equal to 100% of the viewport height and then also in your body selector add:
display: flex;
justify-content: center; // This three will center your component in the middle of the screen
align-items: center;
I'm still new to HTML and CSS so the hardest part was centering everything. Was there an easier way to center this project?
Hi,
Easier way to center everything is using flexbox or grid, I will show u both solutions:
First one
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Second
body{
display: grid;
place-items: center;
min-height: 100vh;
}
If you use one of this, you can remove position absolute,top,left,transform from your body selector ;)
Any feedback is welcomed!!!
Please Review this code and give me your valuable feedback.
Hi, U can set
img{
height: 100%; // to fill empty space on top and bottom
object-fit: cover; // to maintain its aspect ratio while filling the element's entire content box
}
Hi,
body{ font-family: 'Outfit', sans-serif; }