Hi, my first mobile-first design. I used flex-box technology. I tried to used align-self for first and last card to center it in the container but it didn't work and finally I positioned it by using transform translate Y 50%. Maybe you guys know how to do it, or this is only possible with grid ? cheers ! Wojtek
Hello Wojtek Natkaniec congratulations for this project
margin : 0 0; and add a padding : 20px the height of the page would be much better..cards{
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
align-items: center;
}
Hope you find it helpful
I'm still having a problem with display flex but because of that, I've started to learn more about using the flex. I do mistakes here, and I can see them. I'll probably to change them in my next solutions. Feel free to point out my mistakes, I'll gladly to know it!!
Hello jom congratulations for your new project -I have some HTML tips for you:
Hello, Frontend Mentor coding community. This is my first try to code in Frontend Mentor🎉. I had a lots of fun doing the challenge. Any suggestions on how I can improve are welcome!
Hello @YoussefTadarti congrats for your first attempt I got some tips for you
--HTML
--CSS
display: flex;
justify-content: center;
align-items: center;
.cards{
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
align-items: center;
}
hope you find my feedback helpful.
I was struggling with the positioning part of css
Hello VMahluza welcome to the frontend mentor community _here are some tips for aligning the card.
body{
min-height: 100vh;
display: flex;
justify-content: center;
flex-flow: nowrap column;
align-items: center;
align-content: center;
}
--keep it up
Hello Siddhesh Parate congratulations for your first attempt here some tips that I can share it with you :
display: flex;
align-items: center;
justify-content: center;
hope you find it helpful
Do you find it easier to work with flexbox or grid to create a responsive layout?
Hello Abbas Roholamin you did an amazing job with this project
I did this project a couple days ago and I didnt use the grid in it so it didnt become responsive
as it should be so I think that you did the best practice in here.
-keep it up bro
can u give me best pactice about change image when cursor hover that image, and pls tell me if i do something wrong
Hello Buci congrats for your new project I have a few tips for you -I think the .card height should leave it by default because its taking much more height than it should be also the card padding should be reduce about 10px in order to make the main image in full width. -If you add the icon image in the ::after selector by using the content URL it would be easier to align it.
.card .nft-image::after{
content: url(images/icon-view.svg);
display: flex;
align-items: center;
justify-content: center;
height: 98%;
opacity: 0;
width: 100%;
position: absolute;
background-color: hsl(178, 100%, 50%, 40%);;
top: 0;
cursor: pointer;
border-radius: 10px;
transition: opacity 0.4s ease-in-out;
}
.nft-image:hover::after{
opacity: 1;
}
this is how I worked on it. hope you find my comment helpful
I have found difficult to adapt different images for mobile and desktop versions with responsive way. Decision was to use background-images for div instead of direct <img>.
Hello Alexey Glazatov congratulations for your new solution! I have some tips for you if you dont mind
min-height: 100vh; . box-sizing: border-box; to prevent the default margin and padding .display: flex;
justify-content: center;
align-items: center;
** I hope you find my feedback helpful .**
__Your work on the "css" part looks good but !!
If you would give the first line <h1> or <h2> and then adjusted would be more organized.
And i think it`s more right if you put the <img> in : <max-width: 100%> and change to what ever you like from here.
There is an over height between the lines so if you use the <line-height> you can fix the problem.
I hope that i was useful.
