# Homey Flow for Web - three Column view \[CSS customization\]

**URL:** <https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765>\
**Category:** Developers\
**Created:** [February 26, 2019, 9:18pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765 "2019-02-26T21:18:05Z")\
**Posts on this page:** 17\
**Page:** 5

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [November 19, 2020, 10:11am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/81 "2020-11-19T10:11:18Z")

</div>

Versucht mal diesen Code

```
* {
    box-sizing: border-box;
}

.AddFlowCardButton {
    bottom: 0;
    position: absolute;
    width: auto;
    left: 40px;
    right: 40px;
}

.FlowInner {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 60px;
    position: relative;
}

.FlowInner > input {
    flex: 0 0 100%;
}

.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
    margin-right: 20px;
}

.FoldersItemInner .Icon {
    flex: 0 0 20px;
}

.Flow .FlowCards {
    width: auto;
    flex: 1;
}

.FlowCard {
    width: auto;
    margin-bottom: 20px
;
}

.Flow .Name {
    position: absolute;
    top: 20px;
}

.Viewport {
    overflow: auto;
}

.FlowCardArgument {
    font-family: 'lucida console', monospace;
    font-size: .85em;
    display: inline-block;
    padding: 0 3px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.FlowCardDroptoken {
    display: block;
}

.FlowCardIcon {
    flex: 0 0 40px;
    height: 40px;
    padding: 5px;
    border-radius: 10px
;
}

.FoldersItem .FoldersItemInner .Title {
    white-space: normal;
}

.FoldersItem .FoldersItemInner {
    align-items: center;
}
```

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [November 19, 2020, 11:59am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/82 "2020-11-19T11:59:11Z")

</div>

I’m using the following (dark) code:

```
* {
    box-sizing: border-box;
}

.AddFlowCardButton {
    bottom: 0;
    position: absolute;
    width: auto;
    left: 40px;
    right: 40px;
}

.FlowInner {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 60px;
    position: relative;
}

.FlowInner > input {
    flex: 0 0 100%;
}

.FlowTypeGroup {
    flex: 1;
    padding-bottom: 70px;
    position: relative;
    margin-right: 20px;
}

.FoldersItemInner .Icon {
    flex: 0 0 20px;
}

.Flow .FlowCards {
    width: auto;
    flex: 1;
}

.FlowCard {
    width: auto;
    margin-bottom: 20px;
    background: -webkit-linear-gradient(55deg,#060006,#505050 30%,#605050);
}

.FlowCard>.Content>.Title>.Text {
     color: white;   
}

.Flow .Name {
    position: absolute;
    top: 20px;
}

.Viewport {
    overflow: auto;
}

.FlowCardArgument {
    font-family: 'lucida console', monospace;
    font-size: .85em;
    display: inline-block;
    padding: 0 3px;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: red;
}

.FlowCardDroptoken {
    display: block;
}

.FlowCardIcon {
    flex: 0 0 40px;
    height: 40px;
    padding: 5px;
    border-radius: 10px;
}

.FoldersItem .FoldersItemInner .Title {
    white-space: normal;
}

.FoldersItem .FoldersItemInner {
    align-items: center;
}
body {
    background: -webkit-linear-gradient(55deg,#050005,#404040 50%,#505050);

}
span.TextNode {
  color:white;
}

```

Hasn’t failed me.

Changed mine a bit with some items of @copiis, i’m happy with it now.

---

<div class="post-metadata">

**Author:** ![M\_a\_r\_c\_o](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/m_a_r_c_o/32/146_2.png) [@M\_a\_r\_c\_o](https://community.homey.app/u/M_a_r_c_o)\
**Post date:** [November 19, 2020, 4:41pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/83 "2020-11-19T16:41:19Z")

</div>

@copiis & @Martijn_Hoogenbosch Thanks, your CSS works both for me.

The “problem” is that I used the CSS from @Ruud and a quick look I saw that the backgroud picture does not exist anymore on internet.

[This post in this threat](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/55)

---

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [February 6, 2021, 6:42pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/84 "2021-02-06T18:42:55Z")

</div>

> [@StyleRemains](#):
>
> ```auto
> /* Make all elements invisible to hide the simulator selector */
> 
> .Page.PageToolsSettings {
> visibility: hidden;
> }
> 
> /* But still show the phone itself and flexible resize and realign */
> 
> .Page.PageToolsSettings .Simulator {
> visibility: visible;
> width: 150%;
> margin-left: -50%;
> }
> 
> /* Finetune the layout of the screen */
> 
> .Page.PageToolsSettings .Simulator .SimulatorInner {
> width: 98%;
> margin-left: 1%;
> margin-right: 1%;
> }
> 
> /* Now the phone is a tablet :) */
> 
> ```

But when I use that, I get this down here.

 ![Homey Developer 1797d19f2d60](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/8/d/8d4943b78caf8b84390e2fe1af019bae8ef08c95.png)

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [February 6, 2021, 8:29pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/85 "2021-02-06T20:29:26Z")

</div>

To be honest, you shouldn’t be using this anymore. Move to the webapp which will get much more support.

---

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [February 6, 2021, 10:15pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/86 "2021-02-06T22:15:04Z")

</div>

But these setting options are not available in the web app, or have I overlooked something?

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [February 7, 2021, 6:07am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/88 "2021-02-07T06:07:55Z")

</div>

They are, there is a forum topic for it too.

edit:

Sorry! Now I see these are the apps, not flows or anything else. These are not avail in the webapp you are right!

Why would you want to alter these settings?

---

<div class="post-metadata">

**Author:** ![copiis](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/copiis/32/171978_2.png) [@copiis](https://community.homey.app/u/copiis)\
**Post date:** [February 7, 2021, 10:43am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/89 "2021-02-07T10:43:15Z")

</div>

> [@Martijn\_Hoogenbosch](#):
>
> Why would you want to alter these settings?

So that it looks like this.  
It is clearer to edit.  
But if I take the code from above, the working area remains narrow for me.

> [@StyleRemains](#):
>
> ```auto
> 
> ```
> 
> ![image.png](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/3/3b1dc5fd1bad47d35e3ee8add886b809a9b54196.png)

SKq9s9nb.png)

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [February 7, 2021, 11:03am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/90 "2021-02-07T11:03:34Z")

</div>

> [@copiis](#):
>
> So that it looks like this.  
> It is clearer to edit.

just tested and it works for me as expected!

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/e/f/efbafbd5cdd9cd3c56d71e7540f6ef5db7a7dff1.png)

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [February 7, 2021, 12:30pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/91 "2021-02-07T12:30:26Z")

</div>

Works for me too… no issues here.

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [November 29, 2021, 8:47am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/92 "2021-11-29T08:47:20Z")

</div>

Does anyone have this three column view still working? Doens’t work for me anymore, for quite some time now.

---

<div class="post-metadata">

**Author:** ![DaneedeKruyff](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/daneedekruyff/32/964_2.png) [@DaneedeKruyff](https://community.homey.app/u/DaneedeKruyff)\
**Post date:** [November 29, 2021, 10:04am UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/93 "2021-11-29T10:04:44Z")

</div>

Still working for me:

```auto
/* Show flows in landscape */
/*.css-1hu8qec-sc-Center {
    width: 100%;
  display: flex;    
}
.css-ppwutp-Section {
    width: 33%;
}

*/
/* Show flows in landscape */
.css-14scrpd {
    width: 100%;
  display: flex;    
}
.css-1ab8s7t {
    width: 33%;
}

/* Adjust flowcards width for landcape view */
.css-2gc5z4 {
  width: 95%;
}

.css-1rtbrz0 {
  width: 95%;
}

.css-1iuu5lg {
  width: 95%;
}

.css-vvsplf {
  width: 95%;    
}

/* Adjust flowcards width for landcape view */
/*
.css-7hhj7-CardContainer {
  width: 95%;
}
.css-l8ltv8-CardContainer-DraggableFlowCard {
  width: 95%;
}
.css-x1hjk3-CardContainer-DraggableFlowCard {
  width: 95%;
}*/

/* Make long flow names readable*/
.css-huzgua-sc-ItemLabel {
    white-space: pre-wrap;
}

```

---

<div class="post-metadata">

**Author:** ![Martijn\_Hoogenbosch](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijn_hoogenbosch/32/10647_2.png) [@Martijn\_Hoogenbosch](https://community.homey.app/u/Martijn_Hoogenbosch)\
**Post date:** [November 29, 2021, 2:41pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/94 "2021-11-29T14:41:24Z")

</div>

Deze werkt inderdaad ook bij mij. Tnx!

heb de laatste tijd overigens dat ik in chrome geen flows meer kan slepen naar andere folders… in Edge werkt dit echter prima, iemand diezelfde ervaring?

---

<div class="post-metadata">

**Author:** ![Menne\_Talsma](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/menne_talsma/32/8752_2.png) [@Menne\_Talsma](https://community.homey.app/u/Menne_Talsma)\
**Post date:** [February 19, 2022, 5:37pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/95 "2022-02-19T17:37:47Z")

</div>

> [@DaneedeKruyff](#):
>
> ```auto
> /* Show flows in landscape */
> /*.css-1hu8qec-sc-Center {
> width: 100%;
> display: flex;    
> }
> .css-ppwutp-Section {
> width: 33%;
> }
> 
> */
> /* Show flows in landscape */
> .css-14scrpd {
> width: 100%;
> display: flex;    
> }
> .css-1ab8s7t {
> width: 33%;
> }
> 
> /* Adjust flowcards width for landcape view */
> .css-2gc5z4 {
> width: 95%;
> }
> 
> .css-1rtbrz0 {
> width: 95%;
> }
> 
> .css-1iuu5lg {
> width: 95%;
> }
> 
> .css-vvsplf {
> width: 95%;    
> }
> 
> /* Adjust flowcards width for landcape view */
> /*
> .css-7hhj7-CardContainer {
> width: 95%;
> }
> .css-l8ltv8-CardContainer-DraggableFlowCard {
> width: 95%;
> }
> .css-x1hjk3-CardContainer-DraggableFlowCard {
> width: 95%;
> }*/
> 
> /* Make long flow names readable*/
> .css-huzgua-sc-ItemLabel {
> white-space: pre-wrap;
> }
> 
> ```

Thanks, bij mij werkte de oude ook niet meer, deze wel !!

---

<div class="post-metadata">

**Author:** ![SingKT](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/singkt/32/173226_2.png) [@SingKT](https://community.homey.app/u/SingKT)\
**Post date:** [August 18, 2026, 4:20pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/96 "2026-08-18T16:20:26Z")

</div>

Hi,

Tried this three column view css fix with web app 1.18.1. Doesn’t work anymore. Can you please post a working fix.

Thanks

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [August 18, 2026, 4:36pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/97 "2026-08-18T16:36:49Z")

</div>

> [@SingKT](#):
>
> Doesn’t work anymore.

Sorry, flow for web was something 6 yrs ago.  
Before the new Homey WebApp

Opened Flow Web App:

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/2X/6/66ea6334d5409e932eae954bd208bcef02c4fcd1.jpeg)

This isn’t going to work anymore.

Lets say this Topic (4 years later)  
Is closed.

When someone create a customizations for the current (already years old) Homey WebAp, lets create a new topic.

---

<div class="post-metadata">

**Author:** ![Dijker](https://avatars.discourse-cdn.com/v4/letter/d/b9bd4f/32.png) [@Dijker](https://community.homey.app/u/Dijker)\
**Post date:** [August 19, 2026, 4:37pm UTC](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765/98 "2026-08-19T16:37:35Z")

</div>

Closed on August 19, 2026, 4:37pm UTC

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

[Previous page](https://community.homey.app/t/homey-flow-for-web-three-column-view-css-customization/9765.md?page=4)