• Resolved drumltd

    (@drumltd)


    On my home page I have 3 Columns, which show, Title, Image, Extract. In the order. For neatness I’d like all the images to line up, however at the moment, if one of the posts has a shorter title, then the image is slightly higher than the others.

    So ideally I’d like all the images to be inline, and the title to have a bottom vertical alignment, so that they look neater. Is that possible to do?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • I think you could do this by setting a min-height value for your post titles. Would it be possible to share a link to your site so I can take a closer look?

    Thread Starter drumltd

    (@drumltd)

    You can see it as [redacted]

    Is it possible to delete that link once you’ve had a look

    I have redacted the URL for you. For future reference, please note that there is a field you can use when you open a support thread that you can use to share a link. The URL on that field will only visible for logged in users.

    I do not think there is a straightforward way to do this at the moment but you could partially fix this by adding the following CSS code:

    /* Adjust Title Height to make them even */
    @media all and (min-width:660px){
    .home .wp-block-post-title,
    .archive .wp-block-post-title {
      min-height:240px
    }
    }

    If you are not familiar with how to add CSS code, please check this article. Once you add the code, it should look something like this:

    Screen Shot on 2023 06 05 at 15 15 55

    I would also suggest you consider the alternative solution of placing the post title UNDER the featured image, it will help make your columns more even. I hope that helps!

    Thread Starter drumltd

    (@drumltd)

    Never been one for doing things the easy way and just moving the title ??

    The css works a treat, is it possible to a valign bottom, to it, I tried a could of variant, but neither worked. That way the text should sit on top of the image, and any gap would be above the text.

    That way the text should sit on top of the image, and any gap would be above the text.

    This CSS should do the trick (please replace the previous code I shared and use this one instead).

    /* Adjust heading height & link position */
    @media all and (min-width:660px){
    .home .wp-block-post-title,
    .archive .wp-block-post-title {
      min-height:240px;
      position:relative;
      }
      .home .wp-block-post-title a,
    .archive .wp-block-post-title a {
      position:absolute;
      bottom:0;
      }
    }

    I hope that helps ??

    Thread Starter drumltd

    (@drumltd)

    That’s spot on Thanks.

    Cool! I will mark this as resolved ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Lining up Images on Home Page’ is closed to new replies.