Make Mobile Banner Image Larger

Site URL: https://www.boombattlebar.co.uk/

Hello, 

I've just added a video to my sites header with a mobile fall-back image. 

However, the mobile fall-back image is quite small, how do I increase the height of the mobile image?

https://boombattlebar.co.uk/

Many thanks!

Hi Ben, small world, I think we may have a mutual frind!

Anyhow, the issue is partly to do with having parallax turned on. The following should help:

@media (max-width: 640px) {
  /*Image - ensure min-height is larger than section*/ 
  img.custom-fallback-image.loaded {
    min-height: 60vh;
  }

  /*Sectioon*/
  #collection-612c9ebd5d3d1a3a142c6c28 .Intro.Intro--has-image, #collection-612c9ebd5d3d1a3a142c6c28  .Parallax-item {
    min-height: 50vh;
  }
}

On 9/1/2021 at 6:24 PM, Kwamzilla said:

Hi Ben, small world, I think we may have a mutual frind!

Anyhow, the issue is partly to do with having parallax turned on. The following should help:

@media (max-width: 640px) {
  /*Image - ensure min-height is larger than section*/ 
  img.custom-fallback-image.loaded {
    min-height: 60vh;
  }

  /*Sectioon*/
  #collection-612c9ebd5d3d1a3a142c6c28 .Intro.Intro--has-image, #collection-612c9ebd5d3d1a3a142c6c28  .Parallax-item {
    min-height: 50vh;
  }
}

 

Hey Kwam! This has worked! Thank you so much, apologies for the delayed response. 

I'm also trying to get the images to display 2 wide on mobile as opposed to one under the other. Do you have any ideas? 🙂

14 hours ago, BenCLKE said:

I'm also trying to get the images to display 2 wide on mobile as opposed to one under the other. Do you have any ideas? 🙂

For the main section on the homepage? OR other pages too?

14 hours ago, BenCLKE said:

Hey Kwam! This has worked! Thank you so much, apologies for the delayed response. 

 

Super! If you can mark it as the "best answer" it'll help others with the same issue find a solution quicker 🙂

On 9/10/2021 at 11:34 PM, Kwamzilla said:

For the main section on the homepage? OR other pages too?

Super! If you can mark it as the "best answer" it'll help others with the same issue find a solution quicker 🙂

For the main sectionon the homepage 🙂 

6 hours ago, BenCLKE said:

For the main sectionon the homepage 🙂 

You've shot yourself in the foot there, mate, by using image blocks.

My suggestion would be to rebuild that section using a Gallery Block (You're on 7.0 Bedford right?) as it will be easier to manage in future and less fiddly with code and less likely to break in general for things like this.

That said, this one actually isn't too hard and should work with:

@media (max-width: 640px) {
  #collection-612c9ebd5d3d1a3a142c6c28 .sqs-col-3 {
    width: 50%!important;
    float: auto!important;
  }
}

It's not too bad in this instance but using native blocks tends to be better imo.

20 hours ago, Kwamzilla said:

You've shot yourself in the foot there, mate, by using image blocks.

My suggestion would be to rebuild that section using a Gallery Block (You're on 7.0 Bedford right?) as it will be easier to manage in future and less fiddly with code and less likely to break in general for things like this.

That said, this one actually isn't too hard and should work with:

@media (max-width: 640px) {
  #collection-612c9ebd5d3d1a3a142c6c28 .sqs-col-3 {
    width: 50%!important;
    float: auto!important;
  }
}

It's not too bad in this instance but using native blocks tends to be better imo.

That's very helpful & makes sense! thanks again Kwam 🙂