# Responsive App design

**URL:** <https://forum.ionicframework.com/t/responsive-app-design/13628>\
**Category:** ionic-v1\
**Created:** [December 4, 2014, 8:50pm UTC](https://forum.ionicframework.com/t/responsive-app-design/13628 "2014-12-04T20:50:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bogoroh](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bogoroh/32/71504_2.png) [@bogoroh](https://forum.ionicframework.com/u/bogoroh)\
**Post date:** [December 4, 2014, 8:50pm UTC](https://forum.ionicframework.com/t/responsive-app-design/13628/1 "2014-12-04T20:50:29Z")

</div>

Hey Guys,

First time creating a Ionic app and I’m loving it so far!  
I see great potentials with this framework and can’t wait for the full stack version of it.

I’m creating my first native iOS app using, generator-ionic with Firebase as the database and I have some Responsive questions.

How should I code for the different screen sizes that iOS has?  
Certain images look way bigger on a 2x Retina screen etc. I’m trying to center the image on the log in screen but on every device it seems to be different

**HTML**

```
<ion-view hide-nav-bar="true" class="homelogin">  
<div id="landingBox">
	<img src="img/logoLanding.png">  
    <div>
		<a class="facebookLink" ng-click="tryLogin()">Login with Facebook</a>
	</div>
</div>
</ion-view>

```

**CSS:**

```
.#landingBox {
margin-top:100px;
text-align:center;
}

.#landingBox img{
margin-bottom:25px;
}

```

Appreciate the support,

Mike

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [December 4, 2014, 9:46pm UTC](https://forum.ionicframework.com/t/responsive-app-design/13628/2 "2014-12-04T21:46:14Z")

</div>

You probably need to explore media queries for styling across a range of devices.

WARNING: I hate CSS and suck at it. I’m not sure I’m doing media queries well.

Example :

```auto
@media (min-width: 321px) {

    #landingBox {
        max-width: 50%
    }
}

@media (max-width: 320px) {
    #landingBox {
        max-width: 30%
    }
}

```