Jump to content

Make Mobile Banner Image Larger

Recommended Posts

  • Replies 6
  • Views 724
  • Created
  • Last Reply
Posted

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;
  }
}

 

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

  • 2 weeks later...
Posted
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? 🙂

Posted
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 🙂

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Posted
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 🙂 

Posted
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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Posted
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 🙂

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.