Change font size in moving links

  • Hi here is my website:

    https://www.dominicjacksonfilms.com/

    Theme: Draft Portfolio by Pixel Tribe.

    I wondered what I can edit to change the size and perhaps colour of the text that appears in the picture links. As you can see if you hover over the links then a green text appears with the name of that post. But at the moment if the title is longer than one word then the letters over laps the bottom edge of the picture and disappear.

    What would I edit in the style page to change this? I tried inspecting the element in chrome to figure it out on my own but I could not work it out.

    I would love some help please! ??

    I also will maybe want to change the font but once I know what section I can edit I should be able to figure that out! I hope!

    ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hey jdominicjackson,

    The hover box seems to be contained and styled via the .grid-item .overbox rules.

    This starts on line 1199 of your style.css when inspecting in Chrome.

    .grid-item .overbox {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	line-height: 1;
	padding: 0 1em;
}

    if you add transform:translateY(-50%); to that rule it will vertically align the box better.

    The title itself has styling on .grid-item .title { and should be found on line 1261 of your style.css. I reduced the font size to 1.5em and it started to look a lot better.

    Finally the green colour is applied to the anchor .grid-item .overbox h2 a { and can be found on line 1228.

    I hope this helps

    All the best

    • This reply was modified 7 years, 9 months ago by Adam Morgan. Reason: add code blocks
    • This reply was modified 7 years, 9 months ago by bdbrown.
    Thread Starter jdominicjackson

    (@jdominicjackson)

    thanks I only just got a chance to look into fixing it will try this now!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change font size in moving links’ is closed to new replies.