Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Need to force gallery slideshow to fit on smaller mobile screens

1WorldPrint

Asked by 1WorldPrint,

Followers 3

Question

1WorldPrint    0

1WorldPrint
Posted

Site URL: http://www.1worldprint.co.uk

Hi, I have a slight issue with the mobile version of our website and i'm sure there is some CSS that might be able to fix it.

 

http://www.1worldprint.co.uk/

 

The sliders on the front page on desktop are fine and on my iPhone 8 Plus, i have managed to make it fit within the borders but with smaller phones the text doesn't fit. It there is a way to force the gallery to a certain width on mobiles. I have attached some images to give you the idea as well.

 

Thanks for any help.

IMG_9502.PNG

f7400ed8-1887-47e2-be1a-4a09f07b68b6.jpg

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

tuanphan

Add to Page Settings . Advanced > Header <style> @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 40vh !important; } } </style>  

Posted Images

4 answers to this question

Recommended Posts

  • 0

rwp    283

rwp
Posted 
@media screen and (max-width: 699px) {
  [data-section-id="5f310b9e0c19916a428a5342"] .gallery-fullscreen-slideshow {
    height: 45vh !important;
  }

  [data-section-id="5f310b9e0c19916a428a5342"] .gallery-fullscreen-slideshow-item {
    height: 45vh !important;
  }
}

@media screen and (min-width: 700px) and (max-width: 999px) {
  [data-section-id="5f310b9e0c19916a428a5342"] .gallery-fullscreen-slideshow {
    height: 55vh !important;
  }

  [data-section-id="5f310b9e0c19916a428a5342"] .gallery-fullscreen-slideshow-item {
    height: 55vh !important;
  }
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

tuanphan    8,319

tuanphan
Posted
On 9/18/2020 at 12:44 AM, ShortAngryViking said:

Hi @rwp could you take a look at this page please. I can not find a code anywhere to fit the gallery to size on mobile

https://ray-cone-ap64.squarespace.com/gallery

 

passcode: 12345

 

Add to Page Settings . Advanced > Header 

<style>
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}
</style>

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 3
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources