formatting link text of portfolio thumbnails on home page

  • Resolved Sabina

    (@pessimisticoptimist)


    7 years, 11 months ago

    Hello again!

    Can someone help me figure out what is controlling the positioning of the text for the homepage thumbnails? (class .portfolio-thumbnail a)

    Specifically, I was trying to decrease the empty space to the right and left of the text so that it wouldn’t be such a narrow column of text to help with some of the longer titles running out of room on smaller thumbnails.

    Site:
    http://gradycreative.com/development/FWAworkingdraft/ and desktop media query > 1260

    I assumed there were either margins or padding applied to that class, but there aren’t. I’ve inspected the CSS over and over for both the text and the box that encloses it and can’t figure out what’s pushing left and right margins in to make the text so narrow.

    So to illustrate, for this thumbnail (http://gradycreative.com/development/FWAworkingdraft/wp-content/uploads/2016/05/narrow.png) I wanted to allow the text to run further across the box so instead of stacking onto 5 lines and running out of room, it could be 3 lines instead, or even 2, i.e.:
    Church of the Advent,
    Boston, MA 1931

    Thanks for any help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Sabina

    (@pessimisticoptimist)

    7 years, 11 months ago

    Of course just after I posted I discovered that it’s the .project-title class that’s controlling the positioning. I see it’s using an absolute position with a 50% left setting which is probably what’s making the text occupy 50% of the box, and then a webkit adjust of -50% to pull it back to center.

    So now my question is, if I use this override:

    .project-title {
     left: 30%;
     -webkit-transform: translate(-20%, -50%);
}

    Is this something that will be okay across different browsers? I have a vague memory of webkit only applying to Mac/Linux?

    Siobhan

    (@siobhyb)

    7 years, 11 months ago

    Hi there. 🙂

    The CSS you spotted will work as you intended but you’ll also need the following variants of the transform property to ensure it works well across all modern browsers:

    transform: translate(-20%, -50%);
-moz-transform: translate(-20%, -50%);
-ms-transform: translate(-20%, 50%),

    You can find further information on browser compatibility for transform here:

    https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility

    Let us know how you get on with that!

    Thread Starter Sabina

    (@pessimisticoptimist)

    7 years, 11 months ago

    Thank you so much for the info: I’m embarrassed to have asked for such basic CSS info that I should have looked up myself! I had what I call ‘end-of-day brain’, where I’m burnt out and not thinking properly but don’t quite realize it. 🙂

    Added the override and it’s working great. Thanks again.

    Siobhan

    (@siobhyb)

    7 years, 11 months ago

    I’m glad to hear that it’s working great for you!

    Thank you for posting your solution too. I’m sure it will be helpful to others who may be looking to achieve the same thing as you in the future. 🙂

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘formatting link text of portfolio thumbnails on home page’ is closed to new replies.