How to allign text to bottom of images on homepage

  • Author
    Posts
  • #1612834

    ohdearism
    Member

    Hi,

    Can someone please help me figure out how to change the behavior of the preview text on my homepage using Forever theme? I’ve already changed the size of my thumbnails so that they are bigger. However on some of the old posts the images are not large enough to fill the column. This results in the text wrapping around the image, which looks odd.

    How do I add CSS to ensure the text always sits below the image, no matter the image size?

    Thanks

    The blog I need help with is ohdearism.com.

    #1612922

    hfzrhmn
    Member

    Something like this:

    .entry-thumb {
    	margin: 0 auto 10px;
    	display: block;
    	text-align: center;
    	width: 100%;
    }

    It will:
    – Center the thumbnails, so the smaller ones are centered and look aesthetically better
    – Move all text below the image
    – Add some margin between the image and the text (10px on the example above, you can alter the number to add/lessen the margin).

    #1612934

    Hi, for featured images, they will have to be at least 560px in width or this can happen. If you can’t make the images that width, then you can add the following CSS, which will change the float for the entry thumbnail (featured image) from left to “none”. An image alignment of none means left aligned, but with no text wrap.

    .entry-thumb {
    float: none;
    }
    #1612936

    ohdearism
    Member

    Hi guys,

    Thanks hfzrhmn’s suggestion worked perfectly! It looks great! :)

    #1612940

    Wow, sorry @ohdearism and @hfzrhmn, I went into this thread and @hfzrhmn‘s reply didn’t show up for me.

The topic ‘How to allign text to bottom of images on homepage’ is closed to new replies.