Had a great time doing this challenge, what troubled me was in centering it in the middle of the page. I used display grid with place items center, I would like to know if there is another alternative or this the only way to be able to center lets say a div or main element in a page? If y'all have any questions for me feel free to ask!
Hi, you can use Flexbox to center elements too:
parent-element{ display: flex; justify-content: center; align-items: center; }
Where justify-content is for align items vertically and align-items is for algin items horizontally.
I couldn't really use two different sources for my image using <Image/> from Next.js, i just changed the object-fit via media queries.
Hi you can switch between images with the HTML label <picture>. This label help you a lot when you want to swicht images in differents widths, to see how to use it read this MDN article. https://developer.mozilla.org/es/docs/Web/HTML/Element/picture
I was given two images one mobile image for mobile screen and another desktop image for desktop screens, so this brought a lot of confusion, I didn't know if I was supposed to create a different design or just make the difference during styling.
I am soo unsure of how I styled my container, I didn't know if I was supposed to use display: grid; or just style the way I did.
Hi you can switch between images with the HTML label <picture>. This label help you a lot when you want to swicht images in differents widths, to see how to use it read this MDN article. https://developer.mozilla.org/es/docs/Web/HTML/Element/picture
I was very confused when I needed to break the desktop image and fill the void with the phone version, I spent a lot of time typing ''display: none'' and trying to fill it somehow, but I managed to solve it myself using the ' tag 'picture'' that I hadn't put before was just 2 ''img'' tags.
I had a lot of difficulty with responsiveness where I had to make the content smaller to be centralized, I spent 3 hours coding and I am very exhausted from thinking so much. But I think I got a nice result.
I would also like to ask for opinions about my lines of code, I want to know if they are readable, if you can read them in a pleasant way and if there is not a lot of disorganized stuff.
Use the picture label in your html file, with this label you can switch imgs in differents breakpoints. See more in: https://developer.mozilla.org/es/docs/Web/HTML/Element/picture
Hello, this is my solution for the nft card challenge. I got a question: when making the active states for the anchors i always use :hover, should i use :active instead? What do u use?. It seems self explanatory but im curious. Thank u!
si alguien puedo ayudarme a agregar la separacion entre los iconos del reloj como tambie en ethereum y los textos de tiempo, se los agradeceria.
Debes usar un flexbox en los dos contenedores y usar la propiedad gap como dijo @simonhernandez. Pero tambien veo que necesitas alinear de forma vertical los elementos, consigues eso agregando la propiedad "align-items: center". Con esta se alinearan de forma vertical
I have a problem with hover in the image of NFT in the card, I don't know how to hover it. If anyone can help me, I would be very grateful. I'm new to programming, if you have a suggestion to improve my code, feel free :)
Always use the attribute "alt" when you use <img> in HTML. For the hover effect use the positions properties in CSS.
I had a hard time figuring out how to use grid to place the Ethereum icon and the clock icon at the bottom correctly with grid therefore I have used flexbox. But I would be happy if someone could show me how it can be done.
Thank you Bence
Flexbox is fine,but if you use the property "gap" your design will be more exact to the original one
Hi !
I failed in the card dimensions as I didn't succeed in setting a height for it. Then, I should have centered the card in the middle of the screen, but same as the height, it wouldn't apply the "center" property no matter what I changed.
Does anyone knows how can i fix that ?
Thank you :)
If you want to center the card use CCS grid. Using the property place-items:center once your container is a grid, the card will center in your container.
