Vertical alignment of text

• 

  heroofageneration · Member · Apr 3, 2018 at 1:20 am

  • Copy link
  • Add topic to favorites

  I’m using “The Writer” theme, and I’m trying to change how the text is vertically aligned for each blog post’s thumbnail on the front page. When the home page is viewed in mobile mode, the title text for the blog post jumps to the top of the thumbnail. I’d like it to be on the bottom, but I can’t figure out how to refer to it in CSS. As far as I can determine, the class is called “post-title typography-title”, but nothing I enter into the CSS field seems to have an impact.

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

• 

  joshron · Member · Apr 3, 2018 at 2:31 am

  • Copy link

  Hi heroofageneration,

  I changed the position and bottom for smaller sizes. You can try this code.

  @media only screen and (max-width: 660px), screen and (max-device-width: 660px)
  .post-list .book-cover .content {
      padding: 20px 20px 50px;
      position: absolute;
      bottom: 0px !important;
  }

  Let me know if this works for you. Thanks!

• 

  heroofageneration · Member · Apr 3, 2018 at 2:50 am

  • Copy link

  Hi joshron, I added the CSS and reviewed the site both on my desktop and smartphone, but unfortunately the title text is still in the same place; the code does not seem to have worked.

• 

  joshron · Member · Apr 3, 2018 at 2:58 am

  • Copy link

  Hi heroofageneration,

  I see. Can you try changing position: absolute; to position: absolute !important;?

  Hope this helps. Thanks!

• 

  heroofageneration · Member · Apr 3, 2018 at 3:28 am

  • Copy link

  I noticed that with either version of the code, after I save the CSS and return to the CSS panel, the code as changed to:

  @media only screen and (max-width: 660px),screen and (max-device-width: 660px)
  .post-list .book-cover .content {
  
  }

  So I’m not sure if there’s something in your suggestion that’s not permitted by WordPress.

• 

  mouli · Staff · Apr 3, 2018 at 7:37 am

  • Copy link

  Hi
  This might just be a couple of missing braces.
  Try this:

  @media only screen and (max-width: 660px){
  .post-list .book-cover .content {
      padding: 20px 20px 50px;
      position: absolute;
      bottom: 0px !important;
  }
  }

• 

  heroofageneration · Member · Apr 3, 2018 at 2:28 pm

  • Copy link

  Now it works! Thank you both so much, I really appreciate it!

• 

  joshron · Member · Apr 3, 2018 at 3:02 pm

  • Copy link

  That’s great! Thanks for the help @mouli!

• 

  mouli · Staff · Apr 3, 2018 at 11:28 pm

  • Copy link

  My pleasure ;)