How can I have title on the bottom of thumbnails

  • Unknown's avatar
    zigiwig · Member ·

    I am using free version of SPUN theme for my portfolio. how can I put the titles on the bottom of each circle rather than over them
    my blog here https://zigiwigdesigns.wordpress.com

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

  • staff-loquaciousloon · Staff ·

    Hey zigiwig!

    In order to change the position of elements on your theme, you’d need to use Custom CSS, which is part of a Premium Plan or Business Plan.

    With that upgrade, you could use the following CSS snippet (under My Site > Customize > CSS) to shift the titles below the thumbnails:

    .hentry .thumbnail-title {
    top: 200px;
}

.hentry {
    padding-bottom: 30px;
}

@media screen and (max-width: 800px) {
    .hentry .thumbnail-title {
        top: 150px;
    }

    .hentry {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 600px) {
  .hentry .thumbnail-title {
      top: 170px;
  }
}

    There are multiple sets of rules, because on smaller screens the titles take up two lines instead of one, and different padding is also needed. Using all of the above should work for most screen sizes your visitors will be using :)

  • The topic ‘How can I have title on the bottom of thumbnails’ is closed to new replies.