background image in container, unwanted space at left

Ooops. Figured that out: I had custom css setting a left margin that I wanted only for the category page.

Now I have another puzzle: the category page is laid out as I like, but when I click on a post within that category, the post is laid out with lots of space on its left when the browser window is desktop-sized. I would like the layout of each post to match the layout of each category page, in terms of the space between the content and the left side of the browser window. For whatever reason, I haven't yet been able to figure this out. I see in the inspector that there is a large margin left and right... !

To see what I mean: click on "Judgment" for the category page, and then "Techniques: Judges" to see how the post is displayed (on desktop).

Please advise.

Hi there,

do you have any Layout Elements in Dashboard > Appearance > Elements ? Look for one that is assigned to the single Post - that has its Content Width set to 700px. Delete that to set the post to the customizer width.

Thank you. I'd completely forgotten about that element. I get that I wanted any blog post to be narrow (more or less as the nytimes website makes their single articles not too wide-- easier to read). Disabled it.

If I do want to control the width of a single post, I go to Customizer/Layout/Blog?

Hi,

If I do want to control the width of a single post, I go to Customizer/Layout/Blog?

You'll have to use a Layout Element with the content width set to your preference but you'll have to make sure its display rule location is set "Post - All posts" so it only applies to single posts pages.

https://docs.generatepress.com/article/layout-element-overview/#content-1

right: I did that, and it messed up the alignment of single posts with the category page.

I want any text for both single posts and category pages to be aligned (as in the top left of each is in the same position)

did this by adjusting the width of the container in customizer/layout/container

but I wonder if there is a custom css style that would apply only to the width of a single post but leave that single post's alignment pinned to the same horiz/vert position as the category page. is there?

but I wonder if there is a custom css style that would apply only to the width of a single post but leave that single post’s alignment pinned to the same horiz/vert position as the category page. is there?

I'm not sure I fully understand the layout you're trying to achieve.

Can you show an reference site or a mockup image?

I want to control the width of the text of any given single post, for ease of reading, and I want to do that independently of setting the container width in customizer/layout/container.

I have found a good-enough solution, and I can display the blogs in only one column on category pages if need be, but I wonder if there is a specific class (inside-article?) that I could control the width of, which would set a maximum width for every single post without changing how each post is aligned on the web page, so that navigating from a category page to a single post is not visually jarring: a finger placed at the left bottom corner of the category header (bottom of the leftmost letter of that header) will be placed at the left bottom corner of the header of any single post-- if you navigate between the two webpages with your finger placed in that position, the bottom left corner of the header on each page will be in the exact same place.

I think the class that will do that is "entry-content"

yes?

I think the class that will do that is “entry-content”

yes?

That will control only the styling of the contents after the post title. If you want to control the width of the whole main content area including the post title but excluding sidebar, you can go with .site-main.

If you want to control the whole content area including the sidebar, go with div#page.

And if you want to apply this on certain viewports, make sure you use @media rules.