Columns within a column

[HeasHeartfire]

This is a feature I requested some time ago and today I realized I could just do it myself.

Making use of the custom CSS feature and services' customizable ids I've come up with a little modification to allow two services to stack next to each other in a single column.
Obviously this could be modified further but this is all I wanted for myself.

And this is the CSS snippet. I tried to be very precise with the selectors to not mess up the layout. Ideally I'd be using classes instead of ids but it still works.

@media(min-width: 500px) {
    .services-list.flex.flex-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .services-list.flex.flex-col .service {
        grid-column: span 2;
    }
    
    .services-list.flex.flex-col .service > div {
        height: 100%;
    }
    
    .services-list.flex.flex-col .service > .mb-2 {
        margin-bottom: 0 !important;
    }
    
    .services-list.flex.flex-col #col-small.service {
        grid-column: span 1;
    }
}

Then you just gotta put the "col-small" id in whatever services you want next to each other inside services.yaml

- Servicios:
    - Home Assistant:
        id: col-small
        icon: home-assistant.png
        description: Smart home control
    - Nextcloud:
        id: col-small
        icon: nextcloud.png
        description: Google drive killer

[Chewza]

Top notch man!
Got a wild hair up my ass to see how to do this tonight and shocked it wasn't a thing.

[QuickSwitchLK]

You are a legend! 😀 Have been bashing my head to try to do this with the column setting since starting to setup hompage since the weekend with no love, and only to find request for this feature in the past. It took me all of 30 seconds to implement this, Thank you so much.

[Mc-Tay]

Thank you!!!!!!!!! Now my homepage looks so much better!!!!!!!!!

[paulsybrandy]

Okay dumb question.... where do I put css to get this accomplished? I am a little new to this and I have my config almost where I want it but this is just so much sweeter.

What I was originally trying to do was just get the layout to show as 4 columns but no matter how I write the config it keeps either going into 2 columns then another 2 columns, or 3 columns and then one under that one but cannot get it to just display everything as 4 columns. I think that this may be the solution.

Any help would be appreciated!

[HeasHeartfire]

Homepage by default stacks up to 4 groups/columns next to each other, as long as their style is defined as column, so you shouldn't have any issues doing what you are trying to do.

This should just do the trick (inside settings.yaml), you can name each group whatever you want:

layout:
  Group 1:
    style: column
  Group 2:
    style: column
  Group 3:
    style: column
  Group 4:
    style: column

Then inside services.yaml you set which services go into each group.
Now, if you want these columns to be also split into two inside them, that's where my tweak comes in. The css code goes into the custom.css file that you should have inside your config folder.

Maybe I'm misunderstanding what you are trying to say so in that case perhaps you could do a quick mockup in paint or something to see if it's doable.

[paulsybrandy]

@HeasHeartfire you explained it exactly how I needed to understand it. I followed your instructions just as you laid it out and it got me the result I was looking for. I'm new to understanding all of this and that was my issue but long and behold, you knew exactly what I was asking for. Thank you for that!

[stripedew]

This is great, thank you so much! Should be natively added tbh.
TIP: If anyone isn't seeing changes to their layout using this CSS trick, do a force refresh (Ctrl + F5) or clear the cache, it finally showed up for me after that!

[spartanv7]

Thank you for this. I was considering tackling this with custom CSS when I stumbled upon your answer.

There is one flaw though and it has to do with the drop shadow getting cut off at the bottom of the box/card:

If you look closely at the cards for the SABnzbd and qBittorrent cards, you'll notice the drop shadow is cut off on the bottom, but is fine on the non-customized cards for Overseerr and Sonarr.

I was able to fix this by removing some directives in the original CSS and using the following:

@media(min-width: 500px) {
    .services-list.flex.flex-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .services-list.flex.flex-col #col-small.service {
        grid-column: span 1;
    }
}

[pretubedongit]

I logged in my Github account just to say thank you.

[pretubedongit]

This is a feature I requested some time ago and today I realized I could just do it myself.

Making use of the custom CSS feature and services' customizable ids I've come up with a little modification to allow two services to stack next to each other in a single column. Obviously this could be modified further but this is all I wanted for myself.

And this is the CSS snippet. I tried to be very precise with the selectors to not mess up the layout. Ideally I'd be using classes instead of ids but it still works.

@media(min-width: 500px) {
    .services-list.flex.flex-col {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .services-list.flex.flex-col .service {
        grid-column: span 2;
    }
    
    .services-list.flex.flex-col .service > div {
        height: 100%;
    }
    
    .services-list.flex.flex-col .service > .mb-2 {
        margin-bottom: 0 !important;
    }
    
    .services-list.flex.flex-col #col-small.service {
        grid-column: span 1;
    }
}

Then you just gotta put the "col-small" id in whatever services you want next to each other inside services.yaml

- Servicios:
    - Home Assistant:
        id: col-small
        icon: home-assistant.png
        description: Smart home control
    - Nextcloud:
        id: col-small
        icon: nextcloud.png
        description: Google drive killer

@HeasHeartfire Thank you again for the excellent sharing. I just noticed it works well on desktops, but not on mobile web apps. I tried to tweek the customisations a bit and found that mobile view is not loading custom.css at all. I understand if that is the case, I need to find solution on the other components which "imports the custom.css", not here. I just want to make sure whether you guys see the same thing as me, or it's just my side.

[HeasHeartfire]

It won't work on small screens by design, since there isn't enough space to fit two columns side by side and would look weird.
That's why everything is contained inside the "@media(min-width: 500px)" directive.
Try removing it, or lowering the pixel count number.

If you have already done this and your phone is still not showing any changes, maybe it's just loading an outdated custom css from the cache instead of fetching the latest one.

[pretubedongit]

You are absolutely correct. It is working on my iPhone 12 mini after I changed to @media(min-width: 300px)

[VenomousRage]

@HeasHeartfire I just stumbled across your fix, and WOW! Quick and easy fix to a longstanding issue that should be baked in.

I cannot say thank you enough. Great work.