Moving to Sections - 3 columns don't fill width of display

Configuration Frontend
1

I am moving to the new Sections (and have to say it is making my life a lot easier so thank you and kudos to the developers).

My minor issue is that in my old 3 column layout before, the columns filled the entire width of my display. I had carefully designed the front end in to a rectungle that filled my touch screen.

With sections there is a perfect rectangle as designed, but it is too small in all dimensions. Everthing works but there is a big gutter all the way around.

The work around is to zoom the browser in by 25% but is there a canonical way? I notice that if I disable

.container max-width

when I inspect the css this has the desired effect. I am not sure how I would disable that correctly though.

3

Second time lucky, my first reply i thought was working but unfortunately not.

I am having the same issue filling a widescreen monitor, i got it working by setting the following css variable in my current theme.

  #Sections
  ha-view-sections-column-max-width: 800px

Max width on the .container is attempting to calculate the width using this variable but its not defined so its defaulting to 500px, by defining the variable inside the active theme i was able to take up the full width of my screen using 3 columns.

I am using the ios theme to edited the active theme inside /config/themes/ios-themes/ios-themes.yaml

Hope this helps you.

4

Thank you. I was away so was unable to try that.

I find that the recent updates appear to have fixed this :slight_smile:

5

I ws being dumb. The browser remembered the zoom, I will explore the CSS fix…