Centering an entire post on a page

I have a blog here ..... http://www.beyondbridges.net - i am using tonal as my template - I have installed a child theme - I am a css beginner - but definitely moving along at a pace ... the plug in 'child theme configurator' has proven awesome in my learning. i know how to inspect elements and adjust settings .... GENERALLY - i seem to have even cracked @media queries ... so here is my problem - that i KNOW is going to be a doddle for you savvy people.

how do i ensure that the entire post and post stream is centered under the main image - i know i have but padding left in various places and the posts and home page - barring a few nuances I am still working through looks like I want it t - But I just now want to center it all under the header image - ideally the post titles should span the full width of the picture - but if not - at least centered and likewise the block content underneath

can anyone help?

my thanks in eager anticipation

  • Dimitris
    • Support Star

    Hey there John,

    hope you're doing good today! :slight_smile:

    First of all, I've moved this thread to our Support forums, as Members forums that you've used it's more for engagement from other WPMUDEV members, rather than actual support from us. For the later, please use our live chat as described here :wink: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-6

    Now back to your query, as far as I can see, you're using a "center-block" class to proper set that in a fixed width with auto margins.

    This seems to work well, are you trying to accomplish anything else that I might not understand it at the moment? :slight_smile:
    Please advise!

    Warm regards,
    Dimitris

    • John
      • Recruit

      thank you - yes - but there is more - the block doesn't center at all window widths - so i probably need to change media query - but i just don't know what element I am trying to control and with what code... does that make sense?

  • Oguz
    • QA Engineer

    Hey John ,

    Hope you're well today!

    Not exactly understand the question. When I look at your single post page most of the things look like centered. And if you learn the CSS you can easily center elements horizontally.

    There are two easy tips, first text-align;
    text-align:center;
    This code centers inline, inline-block elements and texts. And if you put that code to any element, sub elements also centered because of inheritance. If you didn't hear inheritance before don't forget the research it.

    Second margin;
    margin: 0 auto;
    This code centers the block elements. But you should define width property too. And this code is not inherited to sub level elements. But because of they are sub level they are already moving with block element.

    Is that solve your problem? If not can you explain more, maybe with screenshots.

    Cheers!

    Edit note: Wuuf :disappointed: Again support staff faster than me. I'll catch you guys :stuck_out_tongue:

  • John
    • Recruit

    thankyou - it is not so much text as the whole blocj - and as i sizr th window it moves

    see in attached image how the post header is not aligned with the blog image - i am ok with it moving - i just want to ensure it is always centered with that header

    and then when you look at the post itself - i want it to be centered aswell - so when you look at the second image - which is on an ipad - it is alll the way to the righ - not centered

    i probably need to use media queries to control at smaller sized - which is ok - but first i need to work out how to control that whole block

    BTW notice the header styles move aswell - i just want those aligned left with the side of the block content

    i hope that makes sense - my thanks for your help

  • Adam Czajczyk
    • Support Gorilla

    Hello John,

    I hope you don't mind if I throw my two cents here :slight_smile:

    What I noticed is that in your media queries you're using "em" as a unit while in margins/padding you're using px (pixels) and the layout is actually a "boxed layout". It's better not to mix these units this way as pixels are "fixed" and em is a unit that's more "dynamic". Take a look here:

    https://www.w3schools.com/cssref/css_units.asp

    What I mean is that even if you got layout perfectly centered on your device using "mixed em's and px's" that can not only "distort" while changing the size but also even when viewed on a different device (e.g. I'm working on two screens at once of different resolutions and dpi and the site looks actually a bit different on both, even though the resolution difference is not very big).

    Best regards,
    Adam

  • John
    • Recruit

    there we go - this is why you shouldn't let a novice near your site :slight_smile: THANKYOU - I can set about fixing that ... any thoughts as to which is the good practice measures to use - I am guessing em ? which is fine - but I kinda understand pixels - but yes - I agree - onto my next lesson !

  • Predrag Dubajic
    • Support

    Hi John,

    This is kinda hard question, but for making your site more fluid and responsive it's better to go with em or rem values.
    I would suggest reading some guides about differences between px and em to better understand how they work and when it should be used, these could help for start:
    https://webdesign.tutsplus.com/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
    http://engageinteractive.co.uk/blog/em-vs-rem-vs-px

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.