2016 Blog text spacing

1=>
On the Blogs page, https://www.kiminipublications.com/wp/stuff/blogs/, I’d like to narrow up the right-side Archive sidebar in order to increase post width.

Add this to you style.css file

body.blog .sidebar {
width: 25%!important;
}
body.blog .content-area {
width: 75%!important;
}

That worked great, thank you! I’m still working on #2, and haven’t found what to set to move both the header and text toward the left margin. Thanks again.

Try this code in your child theme’s stylesheet:

@media screen and (min-width: 56.875em) {
  .archive.no-sidebar .entry-header,
  .archive.no-sidebar .entry-content,
  .archive.no-sidebar .page-header {
    margin-left: 5%;
    margin-right: 5%;
  }
}

This code would only apply when the browser width is wider than 910 pixels and only when you’re viewing an archive page.

When the window is smallish it now maximizes window usage, which is great, however it still wastes a great deal of screen space when >910 px (the text shifting to a narrow mid-window column). I see where the 56.875em value comes from yet changing it has no effect. I’d like the archive pages to retain full-width at all times independent of window width, just like the current blog screen.

Thanks again!

What size screen are you using? One possible fix would be to set no margins at all at larger screen sizes:

@media screen and (min-width: 56.875em) {
  .archive.no-sidebar .entry-header,
  .archive.no-sidebar .entry-content,
  .archive.no-sidebar .page-header {
    margin-left: 0;
    margin-right: 0;
  }
}

What also might be happening is that the entire site (including the header area) is set to a maximum width of 1320 pixels, and so you get the wide left and right margins if your browser window is wider than that. You could override that if you wanted with this code:

.site-inner {
  max-width: 100%;
}

For your second question, the “em” unit is relative to the font size, as opposed to the pixel, which is always the same size (most of the time, anyway). The main advantage of using ems is that if users resize the text in their browser (by defining their own stylesheet or using Ctrl-plus and Ctrl-minus, etc.), the relative spacing between various elements would remain the same.

1920 x 1080, but I know people use various size screens. That’s why I always vary size and saw it acting different. I already set the left and right margins to zero, which makes it display perfectly on smaller windows, so it’s almost there. I would however like to retain that full-width layout regardless of window size. I don’t know why but adding

.site-inner {
  max-width: 100%;
}

had no effect, so maybe it’s being overruled by something elsewhere.

Good to know about “em” and why I should use that instead of magic pixel values.

Thanks again for the lessons!

I guess we can consider this closed. I figured it out myself by using Chrome and its right-click “Inspect” feature. It’s a pretty awesome tool because it lets you see exactly how the code affects any highlighted portion of a page. Thanks again for all the help, especially stephencottontail!