# Homey Web App \[CSS customization\] **URL:** \ **Category:** Apps\ **Created:** [December 23, 2020, 2:43pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682 "2020-12-23T14:43:00Z")\ **Posts on this page:** 20\ **Page:** 2
**Author:** ![Fire69](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/fire69/32/8758_2.png) [@Fire69](https://community.homey.app/u/Fire69)\ **Post date:** [December 25, 2020, 4:50pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/21 "2020-12-25T16:50:21Z")
Could you maybe comment the different sections to show what code changes what? Just to try and learn something from it 🙂 ---
**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:** [December 25, 2020, 5:30pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/22 "2020-12-25T17:30:21Z")
Read the entire thread, I haven’t created anything just copied from other people and consolidated. So no credits to me 😉 ---
**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:** [December 25, 2020, 5:31pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/23 "2020-12-25T17:31:16Z")
Surface pro 😉 works great now ---
**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:** [December 26, 2020, 7:39am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/24 "2020-12-26T07:39:43Z")
I had planned to do that, just haven’t found the time yet, just hang on 😉 ---
**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:** [December 28, 2020, 7:57am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/25 "2020-12-28T07:57:33Z")
I’ve added all different options to the first post, including remarks on what they do and before and after screenshots. Added the code to the second post without the screenshots for your convenience to copy. ---
**Author:** ![AWBoonen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/awboonen/32/5095_2.png) [@AWBoonen](https://community.homey.app/u/AWBoonen)\ **Post date:** [December 29, 2020, 8:00pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/26 "2020-12-29T20:00:59Z")
Please be aware. It seems they’re using something which looks like styled components. This is creating a unique class name which, on next deploy might break all your changes. It might be better to use attribute selectors like: `[class*="Main"] [class*="Root"] [class*="Center"] { ... }` as it is less likely these names are going to change. Looking at their source code, I’m quite disappointed in their css coding quality. It is very outdated and hard to maintain. I don’t have the time to go in detail. But an example is the fixed width of the cards or the lack of using css grid or overuse of flexbox. ---
**Author:** ![Henk\_Renting](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/henk_renting/32/87634_2.png) [@Henk\_Renting](https://community.homey.app/u/Henk_Renting)\ **Post date:** [December 29, 2020, 8:12pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/27 "2020-12-29T20:12:54Z")
Athom just released an update where you can resize the sidebar: https://www.facebook.com/plugins/video.php?height=426&width=426&share_id&href=https://www.facebook.com/homey/videos/183568210143077/ (found on their Facebook page, and is on Instagram too) ---
**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:** [December 29, 2020, 8:19pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/28 "2020-12-29T20:19:22Z")
I’ve brought this topic to @Emile’s attention on Slack, good to see this is getting picked up! Now what else do we want… 🤔😜 (Next to landscape view for flows!) ---
**Author:** ![Jero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jero/32/17556_2.png) [@Jero](https://community.homey.app/u/Jero)\ **Post date:** [December 30, 2020, 11:49am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/29 "2020-12-30T11:49:18Z")
Why is it hard to maintain? ---
**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\ **Post date:** [December 30, 2020, 12:07pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/30 "2020-12-30T12:07:57Z")
Sounds like Athom is doing all the layouting manually instead of letting the browser take care of it. Does fit with Athom’s NIH paradigm though 😂 ---
**Author:** ![AWBoonen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/awboonen/32/5095_2.png) [@AWBoonen](https://community.homey.app/u/AWBoonen)\ **Post date:** [December 30, 2020, 3:12pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/31 "2020-12-30T15:12:00Z")
Een paar dingen die me zijn opgevallen zijn: - Naming: `css-...Grid` doet `display: flex`, `css-...Content` is geen content, maar `nav` - Flexbox voor containers - Pixels: Units zijn pixels. Hierbij heb ik het vermoeden dat er geen vast afstanden zijn voor bijvoorbeeld witruimtes. - inline css met svg-data attributen. - gebruik van niet bestaande attributen - gebruik van `tab-index -1` - overmatig gebruik van css (`display: inline-block; width: 20px; min-width: 20px;` - Onduidelijke custom properties of met een rare prefix: `--lvl, --reach-slider, --tmp-color-white` (Dit is natuurlijk smaakgevoelig) - Gebruik van `!important` ---
**Author:** ![Andre\_Prins](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/andre_prins/32/10401_2.png) [@Andre\_Prins](https://community.homey.app/u/Andre_Prins)\ **Post date:** [January 3, 2021, 6:26pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/32 "2021-01-03T18:26:23Z")
I would like to see that the favourite devices scale to the screen to have them always in one screen instead of scrolling down, just like in your homeydash 😊 I’ve already shared this idea to them 😉 ---
**Author:** ![Fire69](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/fire69/32/8758_2.png) [@Fire69](https://community.homey.app/u/Fire69)\ **Post date:** [March 1, 2021, 8:56pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/33 "2021-03-01T20:56:20Z")
Did Athom update the app? Seems like the custom settings aren’t working anymore. No more horizontal cards, etc. ---
**Author:** ![Robert\_Zwetsloot](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robert_zwetsloot/32/12399_2.png) [@Robert\_Zwetsloot](https://community.homey.app/u/Robert_Zwetsloot)\ **Post date:** [March 1, 2021, 9:17pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/34 "2021-03-01T21:17:05Z")
Yep ---
**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\ **Post date:** [March 1, 2021, 9:25pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/35 "2021-03-01T21:25:56Z")
They seem to work on it pretty often ---
**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:** [March 4, 2021, 3:59pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/36 "2021-03-04T15:59:12Z")
Flows in landscape does not work anymore but scripta are now online ---
**Author:** ![JPe4619](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jpe4619/32/9017_2.png) [@JPe4619](https://community.homey.app/u/JPe4619)\ **Post date:** [March 9, 2021, 2:53pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/37 "2021-03-09T14:53:00Z")
> [@DaneedeKruyff](#): > > good to see this is getting picked up! @DaneedeKruyff Yeh, something was changed, now your CSS code does not work anymore (on Windows- Chrome), what to do now? ---
**Author:** ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)\ **Post date:** [March 9, 2021, 4:38pm UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/38 "2021-03-09T16:38:59Z")
My guess: wait until it is released as official. It is a beta so things change without notice ---
**Author:** ![Adrian\_Rockall](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/adrian_rockall/32/13209_2.png) [@Adrian\_Rockall](https://community.homey.app/u/Adrian_Rockall)\ **Post date:** [March 11, 2021, 7:27am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/39 "2021-03-11T07:27:42Z")
Can people leave feedback on the web app asking for the three column mode to be an official option. Maybe if they get asked often enough they might do it. As the previous css changes are quite simple, IF you know what you are doing :-), it surely can’t be a big effort for Athom to implement. ---
**Author:** ![Adrian\_Rockall](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/adrian_rockall/32/13209_2.png) [@Adrian\_Rockall](https://community.homey.app/u/Adrian_Rockall)\ **Post date:** [March 11, 2021, 8:26am UTC](https://community.homey.app/t/homey-web-app-css-customization/39682/40 "2021-03-11T08:26:23Z")
New styleBot css for current webApp: ``` .css-1hu8qec-sc-Center { width: 100%; display: flex; } .css-ppwutp-Section { width: 33%; } .css-7hhj7-CardContainer { width: 95%; } .css-l8ltv8-CardContainer-DraggableFlowCard { width: 95%; } .css-x1hjk3-CardContainer-DraggableFlowCard { width: 95%; } ``` [Previous page](https://community.homey.app/t/homey-web-app-css-customization/39682.md?page=1) [Next page](https://community.homey.app/t/homey-web-app-css-customization/39682.md?page=3)