Restrict width of list on large screen


#1

Any advice would be welcome!

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

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


#2

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

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


#3

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.


#4

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;”

large


#5

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.


#6

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