Many problems with placement and re-sizing

Hey everyone,

As a UX designer it’s very important for me that the UX looks good in my app. But I keep having problems with elements not centering, circles being squeezed and hidden elements effecting others…

I’ve also tried to add notification badge or an indicator on the menu of my app, but the circle turns into a mess (squeezed) on smaller devices, and when it’s not showing (because of no new notifications) it push the icon to the top of the menu bar because the badge is hidden.

See some examples below:

2 Likes

Yes I have the same problem, thanks for talking about this

1 Like

@alexid95

For the line under the Favors to do text, try adding a container (like a white rectangle) around both the text and the underline. That way, when the elements try to react responsively to the screen size, they’ll be bound to the container and not the edges of the screen.

What is it that you are pointing out in your 2nd screenshot?

Can you share screenshots or video of what you are describing with the badge? Thanks.

2 Likes

Ok, will try that! Maybe it would be good with some more UX related tutorials?

The 2nd screenshot is that the image grid is not having equal margin on both sides… It’s more on the right side.

1 Like

I think the issue with your custom list is that there’s margin between the right edge of your last column of images and the right edge of the custom list’s bounding box

Here is the problem again. Designing on a small screen (375px) where the boxes get strected and are not round anymore on big screen and also the hero image here not being placed in the middle. If I design on a big screen the category circles will be squeezed. I’ve tried adding a rectangle behind the categories to try and keep the size but that does not help, it still happens!

1 Like