# Multiple resolution problem in css

**URL:** <https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093>\
**Category:** ionic-v3\
**Created:** [October 25, 2016, 1:36am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093 "2016-10-25T01:36:58Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [October 25, 2016, 1:36am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/1 "2016-10-25T01:36:59Z")

</div>

i am quite new in ionic2 and i still confusing in few things about this framework, one of the biggest confusion of me is what is the good way to set css attribute?  
for example if i set the image height to be 80px which is suitable for my phone resolution but the result is different on other phone…same goes to margin padding and most of the item. do i need to set everything in percentage format so the app will be behave same on all device?

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [October 25, 2016, 2:11am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/2 "2016-10-25T02:11:06Z")

</div>

I think this question is more about responsive design, than a question about Ionic Framework specifically.

Have a look at [http://www.w3schools.com/css/css\_rwd\_images.asp](http://www.w3schools.com/css/css_rwd_images.asp)

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [October 25, 2016, 2:14am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/3 "2016-10-25T02:14:45Z")

</div>

thanks…will look into it now…may i know how you handle this case in ionic2 app?

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [October 25, 2016, 2:17am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/4 "2016-10-25T02:17:53Z")

</div>

It really depends on the case. I don’t use images bigger than what I need and most of the time I use images as background as they’re easier to manipulate.

I only use `img` tag inside `ion-avatar`, `ion-card`, or `ion-slide`.

The rest of the time I prefer using images as background, and I set the `background-size` property to `cover` to make sure that it’s set at the perfect size.

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [October 25, 2016, 2:20am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/5 "2016-10-25T02:20:39Z")

</div>

ya i got it now…not only image…i think set any element width height by pixel like 50px is a bad idea in ionic2?  
i will try and study responsive design now…thanks for helping

---

<div class="post-metadata">

**Author:** ![ihadeed](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ihadeed/32/95258_2.png) [@ihadeed](https://forum.ionicframework.com/u/ihadeed)\
**Post date:** [October 25, 2016, 2:26am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/6 "2016-10-25T02:26:25Z")

</div>

Yeah generally using pixels for width/height is a bad idea but not all the time. For example, modifying the navbar height and setting it manually to preferred `px` value wouldn’t be a bad idea. But setting it’s width to `px` would be a bad idea. Because on a larger device, the navbar will not fill the whole screen.

Try to stick to `%` whenever possible.

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [October 25, 2016, 3:02am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/7 "2016-10-25T03:02:18Z")

</div>

![image](https://global.discourse-cdn.com/ionicframework/original/3X/1/9/193e8730221b7efaa067544b5a36b752ebad3795.png)

for this example…i am trying to do the left contact list for my chat app…i try to align the “ion-avatar” and 2 “p” or “label” in center of the square…and now im kind of stuck in this situation, i try to adjust the css so much but still not the result i wanted…do you have any idea how to do this?

---

<div class="post-metadata">

**Author:** ![chanyap92](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@chanyap92](https://forum.ionicframework.com/u/chanyap92)\
**Post date:** [October 25, 2016, 3:17am UTC](https://forum.ionicframework.com/t/multiple-resolution-problem-in-css/68093/8 "2016-10-25T03:17:00Z")

</div>

i think i figured it out already by trying to use div and a lot of css…thanks for your help for giving me a lot of hints and tips…
