Looking to hire developers?
@snowbot22
@ItsJPerez
Submitted
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!
@snowbot22
Posted
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.
@Xaxnxdxrxexax
Submitted
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.
@snowbot22
Posted
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
@TheAwesomeTechGirl
Submitted
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.
@snowbot22
Posted
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
Marked as helpful
@alephy9
Submitted
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.
@snowbot22
Posted
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
@JoelLH
Submitted
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!
@snowbot22
Posted
Hi :hover is fine, :active is more used on inputs.
@Darkfenix013
Submitted
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.
@snowbot22
Posted
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
@ruansilvaolv
Submitted
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 :)
@snowbot22
Posted
Always use the attribute "alt" when you use <img> in HTML. For the hover effect use the positions properties in CSS.
@zambobence
Submitted
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
@snowbot22
Posted
Flexbox is fine,but if you use the property "gap" your design will be more exact to the original one
@Abecarne
Submitted
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 :)
@snowbot22
Posted
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.
@snowbot22
Submitted
@snowbot22
Posted
Thank you so much fot the feedback !
