(TIP) CSS to make figcaption responsive

[xavierve]

Hi there. Love your baguette :-)
I use figcaption to show the "a href TITLE" text, but it seams to be not 100% responsive, beacause text is showed at botton of mobile device on portrait mode, to far away of normal images.
To fix it a modify the BOTTOM property of FIGURECAPTION element, so in PORTRAIT devices caption moves to 29% of the height of the viewport and, on wider-than-taller devices (LANDSCAPE) remain at very bottom with 0%

I bring you here the code I used if it helps somebody

1- Being mobile first, this is the first part of the rule (whitout breakpoint)
#baguetteBox-overlay .full-image figcaption {
display:block;
position:absolute;
bottom:29vh; /* change for responsive, captions UPPER on portrait /
width:100%;
text-align:center;
line-height:2.8; / changed for design /
white-space:normal;
color:#ffffff; / changed for design /
background-color:#000;
background-color:rgba(0, 0, 0, 0.36); / changed for design */
font-family:sans-serif;
}

2- Breakpoint for screens oriented LANDSCAPE (when wider than taller screens -CSS3 Orientation property on Media Querird.-)
@media screen and (orientation:landscape) {
#baguetteBox-overlay .full-image figcaption { bottom: 0vh;} /* change for responsive, captions at BOTTOM on landscape*/
}