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

Banner/Slideshow on Homescreen looks stretched on mobile


amurphy1108

Question

Site URL: https://timothytrust.ca/

Hello, I'm pretty new to squarespace/coding and I am stuck because on my website homepage -in brackets is to the direct page I want to affect-(https://timothytrust.ca/) I have a nice (what I think is nice) looking slideshow on PC but it looks all stretched out on mobile. I have coded it so that I have stretched it but that's because if I don't it's a very small looking banner. Basically, I just changed the dimensions of the photos I uploaded to the gallery and it changed automatically for PC. So, when it came to mobile, the responsive design made it look super small in comparison to the other blocks. My solution was to code it so that the slideshow gallery was stretched, but that in turn caused me to stretch the images as well. I basically want something like the "what is encounter the truth" image on the homepage of this website -in brackets is to the direct page I want to affect-(https://www.encounterthetruth.ca/) and how on PC  it's a longer banner underneath but on mobile it's more square. I would like that but for my gallery. So, I want to know if this is even a possible fix?

Link to comment
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0
2 hours ago, amurphy1108 said:

Site URL: https://timothytrust.ca/

Hello, I'm pretty new to squarespace/coding and I am stuck because on my website homepage -in brackets is to the direct page I want to affect-(https://timothytrust.ca/) I have a nice (what I think is nice) looking slideshow on PC but it looks all stretched out on mobile. I have coded it so that I have stretched it but that's because if I don't it's a very small looking banner. Basically, I just changed the dimensions of the photos I uploaded to the gallery and it changed automatically for PC. So, when it came to mobile, the responsive design made it look super small in comparison to the other blocks. My solution was to code it so that the slideshow gallery was stretched, but that in turn caused me to stretch the images as well. I basically want something like the "what is encounter the truth" image on the homepage of this website -in brackets is to the direct page I want to affect-(https://www.encounterthetruth.ca/) and how on PC  it's a longer banner underneath but on mobile it's more square. I would like that but for my gallery. So, I want to know if this is even a possible fix?

hi, you can try below code.
@media screen and (max-width: 520px) {
  .homepage .sqs-gallery-block-slideshow {
    height: 100% !important;
    .slide {
      img {
        width: 100% !important;
        height: auto !important;
      }
    }
  }
}

Link to comment
  • 0
Posted (edited)
12 hours ago, Agha_Waqas said:

hi, you can try below code.
@media screen and (max-width: 520px) {
  .homepage .sqs-gallery-block-slideshow {
    height: 100% !important;
    .slide {
      img {
        width: 100% !important;
        height: auto !important;
      }
    }
  }
}

The code didn't work. Just makes it small again and not very legible. If it helps, this is the code I currently have for it: 

@media screen and (max-width:640px) {
section#p2p-home img {
    width: 100% !important;
    left: 0 !important;
    height: 2rem !important;
}
section#hero-image-20 {
    height: 250px;
}
}
@media screen and (max-width:640px) {
.homepage .sqs-gallery-block-slideshow {
    height: 250px !important;
}
  .sqs-gallery-block-slideshow img {
    height: 250px !important;
    }
}

@media screen and (max-width:700px) {
section#p2p-home img {
    width: 100% !important;
    left: 0 !important;
    height: 2rem !important;
}
section#hero-image-20 {
    height: 250px;
}
}
@media screen and (max-width:700px) {
.homepage .sqs-gallery-block-slideshow {
    height: 250px !important;
}
  .sqs-gallery-block-slideshow img {
    height:300px !important;
    }
}

Edited by amurphy1108
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...