Cubic theme – post date and title in the middle of picture

  • Unknown's avatar
    justynakuzma · Member ·

    Hello,

    as default post data and title shows on the particular post at the top/centered of cover photo (like here: https://cubicdemo.wordpress.com/2014/12/21/the-lake/)

    I was trying to put this in the middle of photo but cannot achive this for all media type with custom css.
    can you help please?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, you can try adjusting the “top” value for the entry-header with the following. It was 24px, and 94px seems to pretty much center the title within images. 

    body.page:not(.title-with-content) .hentry.has-post-thumbnail .entry-header, body.single:not(.title-with-content) .hentry.has-post-thumbnail:not(.format-video) .entry-header {
    top: 94px;
}
  • Unknown's avatar
    justynakuzma · Member ·

    thanks but unfortunatelly this looks like can center only for particular screen size and I want to have it centered for all the sizes – big screens, ipad, mobile.

  • Unknown's avatar
    thesacredpath · Member ·

    Ah, I see you’ve changed the value to 5%. Is that getting you where you want to be?

  • Unknown's avatar
    justynakuzma · Member ·

    no, unfortunatelly not – it is centered on some screen sizes but not all – smaller and bigger screens show this diferently… higher, lower but not centered :(

  • Unknown's avatar
    thesacredpath · Member ·

    Centering an element vertically, especially on responsive theme designs can be a real challenge, and in some instances you can never get it to work for all screen sizes do to changes in other elements, such as an image in the background.

    Looking at the responsive layouts at different screen sized using my Web Developer add-on in Firefox, things look pretty close at the more popular screen sizes.

  • The topic ‘Cubic theme – post date and title in the middle of picture’ is closed to new replies.