Jump to content

Gallery images resizing on mobile

Recommended Posts

Site URL: https://joeylim.xyz/

Hello, 

I'm trying to resize my images that are uploaded on to a gallery page(not block) for mobile. I have been successful using a portion of this code to resize the images on desktop/web, however I cannot get the changes to show on mobile. Here is my code currently: 

 

@media only Screen and (max-width: 767px){
  .sqs-gallery-design-stacked {
    transform: scale(2) !important;
  }
}

 

Is this an issue/limitation of my theme(wells) or am I not writing the code correctly? Help would be much appreciated, thanks! 

Link to comment
On 4/19/2022 at 8:16 AM, ioeylim said:

Site URL: https://joeylim.xyz/

Hello, 

I'm trying to resize my images that are uploaded on to a gallery page(not block) for mobile. I have been successful using a portion of this code to resize the images on desktop/web, however I cannot get the changes to show on mobile. Here is my code currently: 

 

@media only Screen and (max-width: 767px){
  .sqs-gallery-design-stacked {
    transform: scale(2) !important;
  }
}

 

Is this an issue/limitation of my theme(wells) or am I not writing the code correctly? Help would be much appreciated, thanks! 

Do you mean resize these images?

image.png.95e03908bd579a16846cf86dce0c7f83.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, bangank36 said:

Do you mean resize these images?

image.png.95e03908bd579a16846cf86dce0c7f83.png

Yes that is correct. 

 

To give you a bit more explanation: There is one image at the bottom of the page that is more or less the size I'd like these images to be. However, for every other image, I have created a white border in photoshop to get the exact size and location that I want for desktop viewing and therefore the mobile version of these images are not filled like the last image. 

Link to comment

Sorry for late response.

You can try the following code

@media only screen and (max-width: 767px) {
  #collection-5d8b0a3e7c1cc52e1389296e img {
    transform: scale(1.5);
  }
}

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...
On 4/25/2022 at 7:59 PM, bangank36 said:

Sorry for late response.

You can try the following code

@media only screen and (max-width: 767px) {
  #collection-5d8b0a3e7c1cc52e1389296e img {
    transform: scale(1.5);
  }
}

 

This seems to almost fix my problem! But one thing: 

The tranform function scales also the logo as well... is there a way to target the logo or collection block on a smaller level? 

Link to comment
13 minutes ago, ioeylim said:

This seems to almost fix my problem! But one thing: 

The tranform function scales also the logo as well... is there a way to target the logo or collection block on a smaller level? 

Try

@media only screen and (max-width: 767px) {
  #collection-5d8b0a3e7c1cc52e1389296e img {
    transform: scale(1.5);
  }

  #collection-5d8b0a3e7c1cc52e1389296e .logo.image img {
    transform: scale(1);
  }
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 minute ago, bangank36 said:

Try

@media only screen and (max-width: 767px) {
  #collection-5d8b0a3e7c1cc52e1389296e img {
    transform: scale(1.5);
  }

  #collection-5d8b0a3e7c1cc52e1389296e .logo.image img {
    transform: scale(1);
  }
}

Let me know how it works on your site

I figured it out! Instead of a media query for mobile screens, I think scaling the webpage version will cause less problems. All I need to do is export the photos again without the borders now. Thank you for helping!! 

@media only screen and (min-width:767px){
#page img{
    transform: scale(0.75);
  }
}

Link to comment
2 minutes ago, ioeylim said:

I figured it out! Instead of a media query for mobile screens, I think scaling the webpage version will cause less problems. All I need to do is export the photos again without the borders now. Thank you for helping!! 

@media only screen and (min-width:767px){
#page img{
    transform: scale(0.75);
  }
}

you rock

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. 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.