# Help with CSS on iphone

**URL:** https://discourse.nodered.org/t/help-with-css-on-iphone/84262
**Category:** Dashboard
**Created:** [3 January 2024 20:14 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262 "2024-01-03T20:14:11Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [3 January 2024 20:14 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262/1 "2024-01-03T20:14:11Z")

</div>

Hello

I have a dashboard keypad for my iphone but cannot work out how to centre the content and ensure that the width of the page is as per the iphone screen width.

This is the node:

```auto
<style>
button {
    background-color: #232323;
    color: white;
    text-align: center;
    font-size: 40px;
}
button:active{
    background-color:#585858;
}
*:focus {
    outline: none;
}
</style>
<center>
    <br><br><br><br><br>
    <table width="250px" height="400px">
    <tr>
    <td ng-click="send({payload: '1'})" ><button>1</button></td>
    <td ng-click="send({payload: '2'})" ><button>2</button></td>
    <td ng-click="send({payload: '3'})" ><button>3</button></td>
</tr>
    <tr>
    <td ng-click="send({payload: '4'})" ><button>4</button></td>
    <td ng-click="send({payload: '5'})" ><button>5</button></td>
    <td ng-click="send({payload: '6'})" ><button>6</button></td>
</tr>
    <tr>
    <td ng-click="send({payload: '7'})" ><button>7</button></td>
    <td ng-click="send({payload: '8'})" ><button>8</button></td>
    <td ng-click="send({payload: '9'})" ><button>9</button></td>
</tr>
    <tr>
    <td ng-click="send({payload: '*'})" ><button>*</button></td>
    <td ng-click="send({payload: '0'})" ><button>0</button></td>
    <td ng-click="send({payload: 'E'})" ><button>E</button></td>
</tr>
</table>
    <table width="250px" height = "100px">
    <tr>
    <td>
    <h2 style="color: #FFFFFF; font-size: 20px; text-align: center">
    {{msg.pass}}
</h2>
</td>
</tr>
</table>
</center>

```

I also have some CSS in a style node:

```auto
#nr-dashboard .masonry-container ui-card-panel#AlarmKeypad_AlarmKeypad {
    max-width: 100%;
    overflow-x: hidden;
    padding:0;
}

```

However, the keypad shows up like this on my phone:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d53073f1a93cffe3bdf03f90e0ed8f478c1a7d69.png)

How do I move the table over to the left so all buttons appear correctly? Sorry I am not sure how to paste the code without it actually showing up in the post lol

  

ADMIN EDIT: Use the `</>` button not the quote button  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/746c3c0126735dc3b1255b070598a77c9560e582.png)

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 January 2024 20:36 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262/2 "2024-01-03T20:36:36Z")

</div>

Why dont you simply use dashboard buttons?

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [3 January 2024 20:42 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262/3 "2024-01-03T20:42:55Z")

</div>

There was a reason, I just cannot remember it lol

---

<div class="post-metadata">

### Author: ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)
#### Post date: [5 January 2024 08:55 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262/4 "2024-01-05T08:55:45Z")

</div>

Deleting the line did the trick 😃

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [4 February 2024 08:56 UTC](https://discourse.nodered.org/t/help-with-css-on-iphone/84262/5 "2024-02-04T08:56:38Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.