Making Responsive Grid & Symbols

I am having a hard time to make my design responsive. My main problem is with the grid & symbols.

  1. I am having a problem with the grid, I want to make one column for phone screens, It seems like deleting columns only grays them out. Also when I manually move them there seems to be some bugs and the software tries hardly to determine where i want to place the instance (Team member). (Team page)

  2. Symbols respond differently to different screens. I have tried to find a setup that would fit most and completely messed up the “Lead” symbol, and he is not behaving responsively. The text fields get misplaced, and even the logo get distorted and I dont understand the root cause of it. (Team and Home pages)

How would you approach it?

Read link

Thanks in advance,
Shlomi Gibly


Hi @donjon!

For problem 1 I find it a lot easier to covert the grid into vertical flex box on mobile. The way you can do this on you site is the the following two photos.

  1. As for the second problem I just removed the image class and took it out the div block it was in from there I tried to make sense of what what wrong with the lead class and made some adjustments that are in the following photos to try and best preserve what you had done. The biggest change was making Lead a vertical flex box. One note would be if you don’t want the photo to not exceed a certain size is just make new class just on the photo and add a max height constrain in px.

Hopefully this helps! If have any further questions please let me know, it looks like you are trying very hard to make this website look great and I would happy to help.

Sean

1 Like