How can I make my mobile image banner full screen on Crave theme?

Store Design
, , ,
1

Can I please have some assistance on how to make my image banner take up the full screen on mobile?

website is https://the601collective-6987.myshopify.com/

The theme is crave

2

Hi @MsBaley You can try this code:

@media(max-width: 749px) {
.banner:not(.banner--stacked) {
   min-height: 100vh;
}
.banner:not(.banner--stacked) .banner__media {
  height: 100% !important;
}
}

Brian_FoxEcom_0-1684486431562.png
Brian_FoxEcom_0-1684486431562.png459×911 342 KB

1 Like
3

Please add this code at the bottom of base.css file

@media screen and (max-width 749px){
.banner__media img {
    object-fit: contain !important;
    position: relative !important;
}
.banner__media {
    height: fit-content !important;
}
}
4

Thanks! I’ve entered this in assets-base.css however it is still not working?

5

This hasn’t worked for me unfortunately. What should I do ?

6

My mistake, please update code like this

@media screen and (max-width: 749px){
.banner__media img {
    object-fit: contain !important;
    position: relative !important;
}
.banner__media {
    height: fit-content !important;
}
}