Jump to content

Slideshow: Reel, making it fit to screen on mobile

Recommended Posts

Hello everyone!,

 

I'm absolutely loving my Squarespace site on desktop, however I'm encountering issues with the mobile version.

I primairly use Slideshow:Reels to showcase my photography work.

But when you look at my website on mobile, the slideshow is cut off and you can't actually see the full images like you can on desktop.

I've tried multipe different CSS's codes from several different sources, including from this forum, and non seem to work.

Is there anyone who can help me out with this?

 

Thank you so much! 

Desktop1.png

Mobile1.png

Edited by MariekeC
Link to comment
  • Replies 6
  • Views 363
  • Created
  • Last Reply

Top Posters In This Topic

On 12/23/2022 at 10:24 PM, MariekeC said:

Heya!

Sorry I thought the URL was already in there ! 🙂

Thank you for wanting to have a look:

https://www.mariekecaptures.com/boudoir

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
.gallery-reel {
	height: 25vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
14 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
.gallery-reel {
	height: 25vh !important;
}
}

 

Amazing thank you so much! You're a hero! 😄 Is it possible to do something similair with the banner images at the top of each page? 

Link to comment
On 12/29/2022 at 11:41 PM, MariekeC said:

Amazing thank you so much! You're a hero! 😄 Is it possible to do something similair with the banner images at the top of each page? 

Add to each Page Header, you can adjust number 35

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
    height: 35vh;
}
  }
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 1/2/2023 at 1:34 AM, tuanphan said:

Add to each Page Header, you can adjust number 35

<style>
  @media screen and (max-width:767px) {
  article section:first-child {
    min-height: unset !important;
    height: 35vh;
}
  }
</style>

 

Thank you so much for all your help! Much appreciated 🙂 everything is looking and workinga  lot better now!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • 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.