Restrict width of list on large screen

Any advice would be welcome!

Using an Icon list it looks fine on a small display (iphone 5)

but on a large screen is just looks wrong!
Is there a way to insert a left margin if screen width exceeds 400px?

@JAR19 you can give max-width css property to your list.

<ion-list style="max-width:400px"></ion-list>

Ion grid is good for this kind of thing.

Also I would perhaps suggest putting a maximum width on your app in general for large screen monitors.

1 Like

It worked great:
Put the list inside a div to center it. with style="display:flex; flex-direction: column; align-items: center; justify

and then for the list style=“width:100%; max-width:600px;”


1 Like

An ion-grid I believe would still be the better solution as it would mean you can place other items next to it in a responsive manner.

Your right but at this stage I do not have anything else to place in a responsive manner.