Auto resizing photos for mobile?


#1

Hi there. I have a Team page in my Blocs layout that has headshots of the team. On mobile, these headshots are huge, and you have to do a lot of scrolling to get through them.

Is there a simple way to make the size smaller for mobile layout independent of the desktop layout? I’m trying to figure out a way of better constraining the size of these, but just for the mobile layout.

Thank you.


#2

Custom class, edit the mobile values set max height.


#3

Thank you for the quick reply. What’s the procedure to add a custom class to only the mobile layout? The way I am doing it seems to be universal across all layouts.


#4

Add the class to the object, switch to mobile view mode, edit class and enter values. Don’t edit it on desktop of tablet and the class will only be used on mob breakpoint.

I have some vids coming soon that will help a lot with classes.


#5

That worked! Thank you.


#6

Hi @Norm, I was looking for solution on the same issue as @kovrus and saw this old posts. I’m trying to add a custom class to only the mobile layout.
I’ve tried what you recommended above but it didn’t’t work for me.
Here’s what I did step by step:

  1. Created a new class to my picture in desktop view mode and entered values --> the class didn’t change my picture’s size though (?)
  2. Switched to mobile view mode
  3. Selected the same picture and opened up the new class
  4. Changed the values - nothing happened. The picture on mobile stays the same.
    I couldn’t make the size smaller for mobile layout independent of the desktop layout

What I’m doing wrong?

Best regards,
Rada