Width issue

[pquerner]

Hello!

I am building a rework of my blog with your theme. Everything is great so far, but I have one issue.

On my macbookpro I have a article which is behaving like this:

while all other posts look like

I have no idea how to debug this, but I am sure its the content width (since its the biggest post, with loads of codeblocks, long sentences etc.).

Maybe its because my "featured" posts doesnt have images?

This was on 1.0.5, I tested 1.0.6 with demo data (had the demo data on 1.0.5 too) and it doesnt happend there.

I am an absolute noob in anything css/template related. Can you could help me?, your next beer is on me for sure! :)

[pquerner]

I've ported my post into the demo page, post five, and can confirm it also happens there. So something about my formatting. :(

https://gist.github.com/pquerner/3d9631ccdb7136b928e5f7733b842d17

[pmoreno-rodriguez]

Hi @pquerner, have you any test website online where I can see your issue?

[pquerner]

Sadly, no. But I added the gist with my blog post files, see here: https://gist.github.com/pquerner/3d9631ccdb7136b928e5f7733b842d17

I've imported this into a new instance of grav using your theme (latest version 1.0.6) and its still there.

Maybe its the (long width) codeblocks or something.

[pquerner]

I've uploaded a dev instance with the new stuff here: https://blogdev.querner.dev/

auth: blogdev / blognewfuture2021 (nothing worth protecting, its all public anyway, but I dont want duplicate content)

[pmoreno-rodriguez]

Hi @pquerner.

Try with this css. You have to overwrite the old files in assets/css folder. css.zip

Please, tell me if this changes work fine.

[pmoreno-rodriguez]

Which version of theme are you using?. I have seen you don't have the crossmark to close sidebar menu.

[pquerner]

1.0.5 runs on the internet, locally I switched to 1.0.6 now - same thing in regards to the css issue. I am in the process now of upgrading my overwritten templates so I get the latest changes. (Only removed small stuff, like I dont use images, or I want my links to check if the page is active and whatnot)

I can confirm the css fixes it "partially". I have uploaded those two files onto the dev server aswell.

What I witnessed is, that the padding is slightly bigger on the blog-listing page than on a blog-item page. Probably not a big deal. (But it doesnt happen on pages without code blocks, so worth meantioning)

May I ask what was the issue?

[pmoreno-rodriguez]

I increased the width of both the sidebar and the main so that they would occupy the 100% width, putting the sidebar in percentage (maximum of 25%) and the rest for the main.

It should work, since before it was as width in pixels.

I have seen that you load your own css from other plugins, maybe you should make some adjustments in the misc.css file, intended for that purpose.

[pquerner]

Nice!

Can confirm that this is all that it took:

#wrapper {
    width: 100%;
}

#main {
    width: inherit;
    min-width: 70%;
}

#sidebar {
    min-width: 20%;
    width: 25%;
}

(from your .css files)

[pquerner]

Oh I forgot. Please add a donation button to the readme so I can buy you a coffee/beer. :)