Blog width

[fraenkiman]

Hello, everyone,

I'm also an avid FlatPress user and the Leggero-v2 style is a good start to create something of your own.

To the core: The maximum blog width of the Leggero-v2 is currently 1024px (div#body-container). Modern screens currently support ~1920px natively.

I played around with the media queries in the CSS. Depending on the size of the screen/Browser, the style adapts to 1920px.

Is the maximum blog width of 1024px enough for you or can it be a little wider? If you want to see what the Leggero v2 style looks like with a larger width, take a look here.

Leave a comment here in the forum with the width that you find appropriate.

Best regards

[WineMan]

I've thought of widening my version of FlatPress, although I don't know if I would like it that wide. How wide is yours and where did you make the change to effect the width?

[fraenkiman]

Hello WineMan,

You can influence the width of the blog in CSS. In the standard version, you can find the appropriate section from line 164 in the common.css file. Two media queries are made here. Line 165 says: if the screen size is at least 720 px then what is written in line 193 applies.
From line 195 (/* ===== RESPONSIVE DESIGN ===== */) it says: if the maximum screen size is 719px, everything up to line 220 applies. I would leave this part largely unchanged.

In my common.css, the width of the design changes at the following resolutions: 720px (line 172), 900px (line 222), 1081px (line 251), 1281px (line 281), 1441px (line 311), 1601px (line 341) and 1920px (line 371).

It can be reconstructed using the browser's developer tools (F12). I use Chromium developer tools. Has the advantage that you can edit the temporarily saved style sheets as a test and view the results. The final adjustments that you have previously tried in Chromium can then be written, for example, in Notepad++ or Geany to common.css. The side menu can be adjusted in the column.css file.

Best regards

[WineMan]

Thank you very much for your response, and it is very detailed for someone of my limited coding skills.

[dart]

Many thanks fraenkiman - looks a lot better like this imo.

[Arvid]

This is pretty helpful, thanks Frank for your detailled explanation