# iPhone X header and bottom tabs

**URL:** <https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942>\
**Category:** ionic-v1\
**Created:** [March 8, 2018, 10:08pm UTC](https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942 "2018-03-08T22:08:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![beck24](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/beck24/32/112174_2.png) [@beck24](https://forum.ionicframework.com/u/beck24)\
**Post date:** [March 8, 2018, 10:08pm UTC](https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942/1 "2018-03-08T22:08:58Z")

</div>

I’m updating an ionic 1 app, and need to make it compatible with iphoneX as apparently updates will be rejected unless it runs at full screen. I’ve followed the checklist, using 1.3.5 with cordova-ios 4.5.1 and the latest statusbar plugin. I can get it running using the full space but am having issues with the spacing of the header and bottom tabs. Here’s a screenshot:

 ![15%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/0/3/0310c447b44e988e20f3cb60767eb9f07b5755f0.png)

As you can see the header title and buttons extend up into the statusbar a bit too much. The bottom tabs are obscured by the mic (or whatever that bar is).

I tried a starter and the bottom tabs are obscured there too.

 ![07%20PM](https://global.discourse-cdn.com/ionicframework/original/3X/2/4/24199994a177c9a7088d9b7d9ce3e3d7d6a9a6f5.png)

Any suggestions?

---

<div class="post-metadata">

**Author:** ![beck24](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/beck24/32/112174_2.png) [@beck24](https://forum.ionicframework.com/u/beck24)\
**Post date:** [March 15, 2018, 5:30am UTC](https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942/2 "2018-03-15T05:30:32Z")

</div>

In case anyone else comes across this - upgrading ionic 1 didn’t update the css files. So I created a new project specifically at v1.3.5 and just copied the css over. Now it’s fine.

---

<div class="post-metadata">

**Author:** ![royheuer](https://avatars.discourse-cdn.com/v4/letter/r/b38774/32.png) [@royheuer](https://forum.ionicframework.com/u/royheuer)\
**Post date:** [March 23, 2018, 5:35pm UTC](https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942/3 "2018-03-23T17:35:46Z")

</div>

Hi there. How do you create a project specifically at 1.3.5?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:46pm UTC](https://forum.ionicframework.com/t/iphone-x-header-and-bottom-tabs/123942/4 "2021-07-19T21:46:10Z")

</div>

Closed on July 19, 2021, 9:46pm UTC