I find it difficult to align the price tag, see I don't succeed so I just leave it there. Also the responsive part, quiete challenging for a beginner since I just start learning CSS. I make it without using CSS flex or grid (I know that concept, just not ready to use it), just using float property.
Hello, firstly congrats completing the challenge!
I think everything seem to be beautiful as in general. About your question; as you're aware of flexbox, I highly reccomend you to dive into flex concept before proceed. It's gonna make your life much much easier.
Trying to position whole compenent center via margin is not a good practice I believe. Instead of this, you could try this method;
body{
background: hsl(30, 38%, 92%);
position: relative;
min-height: 100vh;
}
.container{
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
By setting parent element relative, you can position your child element according to parent element's position. You can use same technique with the price tag. Set parent element's position to relative, then push the child element from top (top:50%) and pull from bottom (transform: translateY: -50%). Or you can simply use flexbox :)
I hope that helps a little bit. Happy coding!
I'm pretty sure that the <section> parts can be simplified. How should I do? Also, do I need to fix something?
Any feedback welcome!
Hello Rafael, congrats for completing the challenge!
To answer your question, I see that you're using section to group every line in the design. That is a bit unnecessary. Let's have look;
Example HTML;
<section class="userInfo"> /*userInfo has display flex and flex-direction:column*/
<h1>Victor Crest <span>26</span><h1>
<p>London</p>
</section>
<ul class="stats"> /*display:flex*/
<li>80K<span>Followers</span></li> /* also every li element should have display flex, direction column*/
<li>803K<span>Likes</span></li>
<li>1.4K<span>Photos</span></li>
</ul>
I hope this helps a little bit
Hello!
This is my solution to the nft card component challenge, if you have any feedback i'd love to read it.
Have a great day!
Hello Agustin, firstly congrats for completing the challenge!
Generally everything seem to be okay but maybe I'd recommend you to pay attention the details a bit more. Like fonts, colors, border radius etc.
I see that you're using too specific class names and selectors. If you could define general styles at the beggining (e.g body{font-family: "Roboto", sans-serif}), it would be easier to design rest of them.
I struggled to understand how to make my image fill the entire div
Hello, firstly congrats for completing the challenge!
I see that your image looks fine yet you could get a cleaner code.
Things that you can improve;
I hope this helps a bit. Have a good day!
I'm having trouble with creating an overlay with color in the image so in that part I am not perfect. Any feedback or suggestion would be appreciated.
Hello, firstly congrats completing this challenge!
As I checked your code, I see that none of your divs has width or height attributes. You're pushing the main compenent from sides by defining margin to body element. This is pretty bad practice. Instead of this, you could try that;
body{
display: flex;
background-color: hsl(217, 54%, 11%);
justify-content: center;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.card{
background-color: hsl(216, 50%, 16%);
border-color: hsl(215, 32%, 27%);
border-radius: 1rem;
max-width: 25rem;
}
In this way, you use your body element as your container and align your component exact middle of the page thanks to flexbox property. And limit your .card element's max-width 25rem. So it would be easier to control responsive design.
P.S: Also you don't need these media queries in this scenerio. `
Hello,
Few things I think you can improve;
body{ height: 100vh; background: #0d192b; display: flex; flex-direction: column; justify-content: center; align-items: center; }Also I really loved your overlay transition solution for view icon. Congrats!
Hi everyone,
This is my second Frontend Mentor project.
I find positioning and aligning elements frustrating at times. I went with Flexbox in the end as I find it so much easier to position elements. The downside is I needed to add more flex containers in my HTML - Am I overusing Flexbox?
Thanks in advance,
Scott
I used to think as same as you before but then I realized flexbox is just a display option as block or inline etc. It's not general layout tool, so I use whenever I need :)
Also I liked you're working with comments in your code. It makes your code pretty easy to read. I definitely use same method on my next project.
Excellent design in my opinion, congrats!
It's my first time coding anything, is there any suggestions you might have for me? Please be critical so I can improve my coding.
Hello Mark,
Things that you can improve in your code;
-Instead of trying to center your container by using margin, you can set your body's display property as flex, justify-content: center, align-items: center. Meanwhile, you should delete margin properties from your float-container.
-Instead of defining float-child1 and float-child2, you can select both divs with ".float-container div". For this selection, define flex:1 to get equal width divs.
As a general mistake, I see that you're using margins to place things. To be more precise and better responsive results, I suggest using flex properties like justify-content, align-items etc. You may want to research flex properties to understand each of them. I believe It'll improve your code in the future, too.
Hope I could help. Happy coding!
