Mobile Banner Height

Site URL: https://www.glintcompany.com/

Hello,

I'd like to slightly reduce the height of just my mobile banners. How can I do it?

On the other hand, the height of the desktop banners is already fine.

Thanks,

Can you share access password?

Sure thing, here it is: Glint0424+

Let me know if you can help me with that,

thanks,

Add to Home > design > custom CSS

@media screen and (max-width:640px) {
.banner-thumbnail-wrapper.has-description, .desc-wrapper {
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}

Thanks a lot, it works exactly as expected!

Another question: right now the text is not exactly vertically centered in the cropped image on mobile, how can I make it vertically centered? See attached to see what I mean.

Thanks,

I updated above code. You can check again.

Amazing, it works perfectly now! Thanks a lot, super helpful!

One last question: would it be possible to do the same thing also for the desktop banners, but manage the desktop banner height separately from the mobile banner height?

I would need the same thing also for dekstop: to be able to adjust the banner height and have the text centered in the image.

Thanks,

@media screen and (min-width:641px) {
.banner-thumbnail-wrapper.has-description, .desc-wrapper {
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
}

Super, thanks a lot! This is amazing, working perfectly!

Pietro