This was a hard one for me but i think i did a good job. what do guys think? I had trouble with the styling changing from 2 panes is simple but then through in the states it get a little crazy.
P
Oscar
@OscarRobertRodriguez
All comments
@mayspiek
Submitted
Started doing this a while ago but finished just now. If you have any idea how I can improve it, I will gladly take it.
i would would change the following as a suggestion to make it responsive.
.container { min-height: 100%; display: grid; align-items: center; justify-content:center; }
.box { border-radius: 3%; padding: calc(24 / 16 * 1rem); padding is 24px this converts to rem display: flex; flex-direction: column; background-color: var(--Very-dark-blue); box-shadow: rgb(0 0 0 / 0.5) 0 0 30px; font-size: .9rem; align-items: center; /* width: 290px; */ remove because makes it non responsive width: 100%; max-width: 350px; box-sizing: border-box; }
.nft-image { border-radius: 3%; justify-content: center; /* height: 300px; / remove / width: 290px; */ remove width: 100%; max-width: 300px; display: block; this gets rid of the extra spacing when overlay is on top }
Marked as helpful
1
