Custom CSS width

[npondel]

Hello! Been poking around this project a bit and I'm trying to widen the page, using the cozy terminal theme.

I've put this in custom CSS, but no matter what I do, inspecting the body elements will still show max-width at the default of 700px

body {
  max-width: 1000px;
}

What am I missing? 😞

[MikeMather]

Hey! Thanks for using publite! Changing the body width using your CSS there seems to be working for me. Can you send your full custom CSS? And can you also check you're using the latest docker release?

[npondel]

it seems really weird that the interpreted variable is still raw in the final output, no?

Here's the raw base.html within the container

[npondel]

waaaaait a minute...why are there line breaks in my base.html...but not in the github repo version....

Forgive the slight use of AI, but I'm not familiar with Jinja. It looks like however I'm ending up with that in my html, it's probably the issue

[npondel]

If you pull the docker image is it borked for you too?

[MikeMather]

Yep thats it! The issue happens because the code formatter we're using tries to treat the Jinja template tags inside the style tags as CSS which breaks the jinja templating. But this doesn't seem to be the case for me using the latest image. I will try a fresh install to verify.

What image are you on now? Should be mikemather/publite:latest which seems to be okay for me.

Either way, I'll look into the formatter to see if I can find a better way to avoid that. Thanks for letting me know!

[npondel]

Nice! Yea happy to dig in. I like the project, and I like a good mystery. Been looking for a dead simple blog application.

For whatever reason, when I pull the static version mikemather/publite:0.1.3, it works. Latest tag isn't working. 😕

[MikeMather]

That's weird 🤔 the digests for the docker images are the same and the code that was deployed looks okay. You might need to force pull the latest tag to make sure it's not using the local version

[CyberGhost4150]

Your rule might be getting overridden by another CSS rule with higher specificity. Try this:

css

body {
  max-width: 1000px !important;
}

2️⃣ Check Parent Containers
Sometimes, a parent div has a max-width set that restricts the body. Try overriding the container’s width:

.container, .content {
  max-width: 1000px !important;
  width: 100%;
}

You can inspect elements in DevTools (F12) and check which container is limiting width.

3️⃣ Override CSS Variables (If Used)
If the theme uses CSS variables, check for something like:

css

:root {
  --max-width: 700px;
}

You can override it like:

css

:root {
  --max-width: 1000px !important;
}

4️⃣ Remove Conflicting Styles
If the body has max-width: 700px applied inline or by another CSS file, override it with:

css
Copy
Edit
body {
max-width: unset !important;
width: 100%;
}
5️⃣ Ensure Custom CSS is Loading
Open DevTools (F12) → Elements tab

Find the body element and check which styles apply

If your CSS isn’t there, it may not be loading properly

[MikeMather]

Appreciate the comment but this is clearly AI generated, doesn't understand what this application is or how it works, and is not relevant at all to what the OP has asked. Please don't comment unless you are familiar with the code and have clearly acknowledged what the OP asked.

[CyberGhost4150]

Its ok didnt have the time to really read everything so just had to make do Forgive me

…

On Wed, Mar 26, 2025 at 4:55 PM Mike Mather ***@***.***> wrote: Appreciate the comment but this is clearly AI generated, doesn't understand what this application is or how it works, and is not relevant at all to what the OP has asked. Please don't comment unless you are familiar with the code and have clearly acknowledged what the OP asked. — Reply to this email directly, view it on GitHub <#2 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BNG5LXX46MCKNPPAITM2JJT2WLEYJAVCNFSM6AAAAABZTZPQAGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENRTGA2TQOA> . You are receiving this because you commented.Message ID: ***@***.***>