Jump to content

Why are images in my slideshow cut-off in mobile view?

Recommended Posts

I need help to work out why the ends my images are being cut off in my slideshow when on my mobile. I have a slideshow on my homepage and you see the full images when I look on a desktop but on my mobile it is cutting the sides of the images off. When I am in the editing mode on mobile-view it doesn't show them being cut off on the display slideshow. But on my mobile they are still cut off.  This has only just started happening out of nowhere. They were fine before. I don't know what changed. I have attached images here which show the correct view in the editing mode, then the other image is how it shows on my phone with the face chopped off. 😞 Really appreciate anyones help 🙂. Thanks friends. 

Screen Shot 2023-06-22 at 6.54.33 pm.png

IMG_E71716520FDD-1.jpeg

Link to comment
  • Replies 8
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

8 hours ago, NicolaAnneColbran said:

Thank you for this suggestion. Would you advise that I get a profession web designer to add this code? I am a lay person so am guessing it is not as easy as just copying this straight into the CSS section myself? 

Just go to this 

squarespace-add-css1-min.png

choose this

squarespace-add-css2-min.png

add the code & save

squarespace-add-css3-min.png

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
  • 3 weeks later...
  • 10 months later...
17 hours ago, Bell6650 said:

I'm having an issue with gallery captions being cut off as well. I'm using gallery slideshow:simple set to height L. The captions look great in desktop but get cut off in mobile. Any insight on how to fix this?

https://www.katiebottrell.com/strategy-work and https://www.katiebottrell.com/project-work

image.thumb.png.f03bf08380877386a64e3b5054ec70c3.png

Use this code to Website > Website Tools > Custom CSS
 

@media screen and (max-width:767px) {
[data-section-id="66560b832b95230ea1764016"], [data-section-id="6656161d71d13e15ce3b4648"] {
    margin-bottom: 70px;
}
body {
    background-color: #f1f1ef
}

.gallery-caption-wrapper {
    overflow: visible !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

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.