@Jonhillupperton
@canceylandag
Submitted
The hardest thing for me while doing the challenge was trying to center the container. I tried using a margin of 50%, but the last time I got 36% by trial and error. Is there a formula or method for this? I'll be happy if you can help me.
@Jonhillupperton
Posted
Also in the body put a display: flex as well. The attribute div to be put in a footer.
@canceylandag
Submitted
The hardest thing for me while doing the challenge was trying to center the container. I tried using a margin of 50%, but the last time I got 36% by trial and error. Is there a formula or method for this? I'll be happy if you can help me.
@Jonhillupperton
Posted
Hello Can_Ceylandag,
Great on submitting your solution.
On mobile version it is all pushed together.
What you can do is in the body tag of the css.
Make sure you have Min-Height:100vh, flex-direction as column, justify-content and align-items as center. Don’t put a width in the body tag
Then on the card itself put a max-width of 320px. Removing the margin properties you use to move it down and long the page.
Also you don’t need a media query for this. In the HTML on the first line where it mentioned about Improve your skills make this a H1.
Thanks
Jon
Marked as helpful
@Feke21
Submitted
I found it difficult to make my work more centered and i would love feedback on that and any any mistake i made with the work. Thanks.
@Jonhillupperton
Posted
Hello Feke,
Great on submitting your solution.
In the body tag of the css I wouldn’t place a width in there, just have the min-height. In the .card class I would put a max-width of 320px.
By doing this it will place the card central really. You won’t need a media queries.
Also with font-size and padding and margin try to use rem units you can use a converter online where you place the pixel amount in and it will give you the rem amount.
Thanks
Jon
Marked as helpful
@GregW1994
Submitted
Hey guys, this is my first frontend mentor project. I'm pretty satisfied with the results, although I have a few questions about my approach and typography.
Due to using absolute position on 2 elements in the same container, those elements started overlapping with each other after viewport height decreased to about 660px. I fixed it with media query, but now it doesn't have that smooth transition while resizing the window (footer suddenly jumps below the viewport when reaching @media (max-height)). Was it a bad idea to use position absolute? If so, what approach would you recommend?
Did i make any stupid mistakes, or unnecessary code-repetition?
I'll be grateful for any feedback
@Jonhillupperton
Posted
Hello Grzegorz,
Well done on submitting your solution to this challenge.
Few bits of advice to help you.
I wouldn't use position absolute on this, I have done the same challenge and I use Flexbox, not sure if you are experience with it. In the CSS by adding the following to the various elements you will center on the page in desktop and mobile mode. You won't need a media querie.
body { Min-Height: 100vh; Display: Flex; Flex-Direction: Column; Justify-Content: Center; Align-Items: Center;
.container { Max-Width: 320px; }
IMG { Width: 100%; Display: block; }
Also try and use rem for most of the elements (font-size, margin and padding) with the main html tag, you have place that within a div tag ideally you want that to be the first tag used after the body tag and assign the main tag class of container. The frontend mentor message at the end place that in a div.
it is a journey we are all on and keep learning and do the projects you will find your own way of doing these.
Thanks
Jon
Marked as helpful
@EricOgbe
Submitted
Could not find the specimen font.
@Jonhillupperton
Posted
Hello Eric,
Great on submitting the project.
Couple bits of advice, use <main class=“container”> instead of <div class=“container”> also the font info is in the style guide.
On the CSS place min-height: 100vh, display flex, justify-content: center and align-items: center in the body tag this will place the container middle of the screen and then on the .container CSS put max-width: 320px and don’t worry about putting heights in the others, as they will predict the overall height and you can increase each element with padding and margin.
Thanks
Jon
Marked as helpful
@deksa89
Submitted
It's my second challenge and any feedback is welcome. I had difficult time to implement blue color on image on hover and it doesn't work as it is supposed to. I assume that there is way easier solution. Cheers!
@Jonhillupperton
Posted
Hello Dean,
Great for submitting the challenge, yeah some people do struggle with that, Grace did submit a response on Slack about completing that part of the challenge.
Look for the #help channel and at the NFT card challenge to see Grace’s help.
Thanks
Jon
@willise414
Submitted
Any and all feedback is welcome
@Jonhillupperton
Posted
That’s great, if you struggle with importing the Google font then you can always message me on slack, couple of people have needed help.
Thanks
Jon
@willise414
Submitted
Any and all feedback is welcome
@Jonhillupperton
Posted
Hello Sean,
Great job, as well as what Grace and Abdul said also to include the font family in the design file as well as it looks like it’s default font.
Keep on coding you do fine.
Thanks
Jon
@thelastmedici
Submitted
What are you most proud of, and what would you do differently next time?
i would be more proactive and work on completing the tasks in less time
What challenges did you encounter, and how did you overcome them?
as a newbie understanding the requirements and transforming it into code wa squite challenging for me but here am i doing good
What specific areas of your project would you like help with?
i would like help with understanding the markdown
@Jonhillupperton
Posted
Hello Christian,
Great job on the project, to improve it don’t worry about using position relative to position it, set min-height: 100vh to body aswell as add display: flex, justify content: center and align-items: center and that will center of screen for mobile and desktop.
Thanks
Jon
Marked as helpful
