how to center containers

Hello, here is a starting point for the single post pages

@media only screen and (min-width: 769px) {
  /* We use flexbox to centre the fixed-width content */
  body.single-post div.site {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  body.single-post #primary {
    /* change width to max-width */
    max-width: 1000px;
    /* align-self is not necessary on #primary */
    /* align-self: center; */
    /* remove the float */
    float: none;
  }
  body.single-post #secondary {
    /* change width to max-width */
    max-width: 300px;
    /* align-self is not necessary on #secondary */
    /* align-self: center; */
    /* remove the float */
    float: none;
  }
  /* To push the footer down the page, though its content is hidden at the moment */
  body.single-post #colophon {
    flex-basis: 100%;
  }
}

Usually the single post page would have a different layout from the archive page, but if you were to remove the max-width properties then the single post page would attempt to fill the available screen width, similar to how your archive/category page content fills up the screen. Hope these help.

Hi Gerry, it seems it works, I just should style the header (i.e.: padding-right) in the same way than other pages, how can I point header +single-post? thank you

Hi @sacconi this might help so the single-post page header looks similar to the other pages …

@media only screen and (min-width: 769px) {
  /* To match the global body tag left & right padding */
  body.single-post #masthead {
    padding-left: 70px;
    padding-right: 70px;
  }
}

I put a little shadow but I cant see the top line of it on the secondary container: https://test.sacconicase.com/marina-di-massa-alloggio-1-piano-4-5-posti-lavatrice/, it should be like: https://test.sacconicase.com/case-vacanza/italia/toscana/marina-di-massa-appartamenti-vacanze/ Maybe I could like to make a little top border above the primary container, left and top side, should I use a more slight shadow, as a method?

You won’t see the top shadow because the top part of the secondary container is hidden behind the header with the fixed positioning. Please google for ‘MDN CSS fixed positioning’ and you will find more info about how to work around content hidden by a fixed header.

Ok, I solutioned putting a little of padding. About your above code, I tryed to use a part of it in order to have the same lenght of primay and secondary containers in archive page: https://test.sacconicase.com/case-vacanza/italia/friuli-venezia-giulia/lignano-sabbiadoro-appartamenti-vacanze/

I used:

.archive div.site {
    display: flex;
    flex-wrap: wrap;
  }

If I use it primary and secondary containers have the same lenght but the upper pagination/navigation bar disappear, any idea to fix this behaviour? thank you

Hi, I can see the pagination/navigation bar at the top of the archive page ( Pagina 1 di 3 …), so I assume you have fixed that issue. Happy WordPressing!

no, I just removed the css ??

I see. Okay, to bring back the top pagination/navigation when using the CSS you plan to add, please try …

.archive .navigazione {
  flex-basis: 100%;
}

Good. But I tryed it also for the search page and I saw an unaspected problem: https://test.sacconicase.com/?s=6557 (the height of the post box)

I suppose this can happen also in archive page when there is just one post

Yes, if the archive page also shows one post then the height of the container holding the posts would shrink — that’s how flexbox layout works.

ok. About your first css there is it possible to change (and does make it sense):

body.single-post #secondary {
    /* change width to max-width */
    max-width: 300px;

into a min-max-width? Because in the laptops the sidebar is too little and cant contain the google ad box

Yes, you can change the max-width property value or add a min-width property however you like, using media queries to target the laptop screen width that makes the sidebar too little for the Google Ad box.

Google ‘MDN web docs CSS min-width’ or ‘MDN web docs CSS max-width’ (without the quotes) for more info