Blog width

Ask questions about FlatPress themes, present your themes, request new themes.
Post Reply
User avatar
fraenkiman
Posts: 203
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Blog width

Post by fraenkiman » Thu Aug 18, 2022 12:51 am

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
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

User avatar
WineMan
Posts: 106
Joined: Tue Sep 01, 2020 5:03 pm

Re: Blog width

Post by WineMan » Thu Aug 18, 2022 2:20 pm

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?

User avatar
fraenkiman
Posts: 203
Joined: Thu Feb 03, 2022 7:25 pm
Location: Berlin, Germany
Contact:

Re: Blog width

Post by fraenkiman » Thu Aug 18, 2022 7:03 pm

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
:pencil: You are strong in PHP and Java Script? :point_right: Then help us to improve FlatPress. :point_left:

:exploding_head: Looking for ideas, templates, examples and answers to frequently asked questions?
:bulb: You'll find it here.

My :de: FlatPress-Blog: https://frank-web.dedyn.io

User avatar
WineMan
Posts: 106
Joined: Tue Sep 01, 2020 5:03 pm

Re: Blog width

Post by WineMan » Thu Aug 18, 2022 7:54 pm

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

dart
Posts: 58
Joined: Sun May 30, 2021 4:46 pm

Re: Blog width

Post by dart » Wed Mar 01, 2023 5:37 pm

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

User avatar
Arvid
FlatPress Coder
Posts: 555
Joined: Sat Jan 26, 2019 7:40 pm
Contact:

Re: Blog width

Post by Arvid » Sun Mar 05, 2023 12:47 pm

This is pretty helpful, thanks Frank for your detailled explanation :)
πŸ“ Project blogβ€ƒβ€ƒπŸ“– Docsβ€ƒβ€ƒπŸ¦ Twitterβ€ƒβ€ƒπŸ˜ Mastodonβ€ƒβ€ƒπŸ“œ Forum RSS feedβ€ƒβ€ƒπŸ“œ Project blog RSS feed  ❀️ Donate


Save the date: FlatPress Community Meetup in πŸ‡©πŸ‡ͺ Berlin on March 23rd! Announcement, Forum Topic

πŸ”₯ How to rework your themes and plugins for FlatPress 1.3 / Smarty 4 πŸ”₯

Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests