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
@mayspiek
Posted
@OscarRobertRodriguez Tysm all of this helped me a lot! After some research, instead of the width and max-width, I added the function min(); to the width and it worked just fine! The extra spacing was bothering me a little bit lol, thank you again.
@bregadero something's not exactly lining up on mobile the container isn't centered for some reason
@bregadero okay yeah min() is cool. I made a mistake, instead of justify-content on the container do this:
.container { min-height: 100%; display: grid: place-items: center; }
add and change these two properties on .box.
I put 350px because that's the max width that card gets on bigger screens.
.box {
box-sizing: border-box;
width: min(100%, 350px);
}
.card-image{
add
width: min(100%,300px);
}
.overlay {
dont need because set it on .card-image
width: min(100%, 300px);
}
.nft-image {
dont need because set it on .card-image
width: min(100%, 300px);
}
add this to line up text with img
.text {
width: min(100%, 300px);
}
