Jump to content

How to fix hight of slideshow in mobile version

Recommended Posts

Hi! 

I am working on my new website but I noticed something and I don't know how to fix it. I have a portfolio page where I feature my work in a slideshow, and it looks perfect on the desktop version. However, when I look at the page in the mobile version, there is a lot of space between my slideshow section and the sections above and below. I think it has something to do with the fact that in the desktop version the hight of the slideshow (+ slideshow images) is fixed, but in the mobile version the width is fixed and the height differs. I added two pictures of what it looks like in the mobile version. Is there maybe a way to fix this? Thanks!

Schermafbeelding 2022-11-11 om 18.05.02.png

Schermafbeelding 2022-11-11 om 18.05.17.png

Edited by Illusterre
Link to comment
  • Illusterre changed the title to How to fix hight of slideshow in mobile version
  • Replies 1
  • Views 320
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

32 minutes ago, Illusterre said:

Hi! 

I am working on my new website but I noticed something and I don't know how to fix it. I have a portfolio page where I feature my work in a slideshow, and it looks perfect on the desktop version. However, when I look at the page in the mobile version, there is a lot of space between my slideshow section and the sections above and below. I think it has something to do with the fact that in the desktop version the hight of the slideshow (+ slideshow images) is fixed, but in the mobile version the width is fixed and the height differs. I added two pictures of what it looks like in the mobile version. Is there maybe a way to fix this? Thanks!

Schermafbeelding 2022-11-11 om 18.05.02.png

Schermafbeelding 2022-11-11 om 18.05.17.png

I FOUND THE ANSWER: 

 

/* Mobile slideshow padding */
@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 30vh !important;
}}

 

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.