Gallery images resizing on mobile

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! 

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?

1 hour ago, bangank36 said:

Do you mean resize these images?

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. 

On 4/20/2022 at 10:58 AM, bangank36 said:

Do you mean resize these images?

Hello?

Sorry for late response.

You can try the following code

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

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? 

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

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);
  }
}

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

3 minutes ago, bangank36 said:

you rock

Thank u for the work u do on this community. It made me wanna understand html/css so i went to learn it. You the champ