@MariusG1991
@StarChan013
Submitted
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!
@MariusG1991
Posted
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 😉
@csdemaria
Submitted
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.
@MariusG1991
Posted
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 :)
@MariusG1991
Posted
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.
@Ahmedq02
Submitted
The sizing and positioning were the hardest to get right, is there and easy way of doing this?
@MariusG1991
Posted
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;
Marked as helpful
@sarahhetman
Submitted
I'm still new to HTML and CSS so the hardest part was centering everything. Was there an easier way to center this project?
@MariusG1991
Posted
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 ;)
Marked as helpful
@TariCodes
Submitted
Any feedback is welcomed!!!
@MariusG1991
Posted
Hi,
Good job, one thing I would change is text color in the description paragraph, use darker one for better readability, u can use coolors site for checking contrast ratio between text and background color.
@Dhananjaysutwane
Submitted
Please Review this code and give me your valuable feedback.
@MariusG1991
Posted
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
}
@As-sakhowy
Submitted
@MariusG1991
Posted
Hi,
body{ font-family: 'Outfit', sans-serif; }Marked as helpful