Thanks a lot Elliot. That made the titles visible, they just needed to be moved down a bit more. Below is the final custom CSS code:

@media screen and (max-width: 500px) {
.slideshow_align_caption { padding: 0px !important;
bottom: -8px;}
}

Thanks again!

Thanks again! Sorry didn’t notice the tag on the heading; I removed it and it still looks quite bad in Chrome.

Thanks again!

Thanks for the quick response! On my Mac I’m using a remote desktop connection for Windows (which ironically looks better than on a PC). My colleagues are using Windows 7 and it looks quite bad. Chrome is version 40 (or Version 40.0.2214.115 m to be more specific).

Just an update here, I’ve been changing up the font face URLs, font file locations, etc…still not working. Here is my current info:

The following is in my custom.css file (font file names are correct):

@font-face {
font-family: ‘AvenirNextLTPro-Medium’;
src: url(‘fonts/2D45D700.eot’);
src: url(‘fonts/2D45D700.eot?#iefix’) format(’embedded-opentype’);
src: url(‘fonts/2D45D700.woff2’) format(‘woff2’);
src: url(‘fonts/2D45D700.woff’) format(‘woff’);
src: url(‘fonts/2D45D700.ttf’) format(‘truetype’);
src: url(‘fonts/2D45D700.svg#AvenirNextLTPro-Medium’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘AvenirNextLTPro-Demi’;
src: url(‘fonts/2D45D710.eot’);
src: url(‘fonts/2D45D710.eot?#iefix’) format(’embedded-opentype’);
src: url(‘fonts/2D45D710.woff2’) format(‘woff2’);
src: url(‘fonts/2D45D710.woff’) format(‘woff’);
src: url(‘fonts/2D45D710.ttf’) format(‘truetype’);
src: url(‘fonts/2D45D710.svg#AvenirNextLTPro-Demi’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

I currently have my fonts in three places on the back end:
– in the main webroot folder (in a folder called “fonts”)
– in the enfold theme folder (in a folder called “fonts”) – the WordPress files are in a subfolder of my webfoot folder called “new” as I’m building the new landing page in a subdirectory of my main site
– in the enfold/css folder (in a folder called “fonts”)

And finally, I have the following code in Quick CSS:

h3, h4, h5 {
font-family: ‘AvenirNextLTPro-Medium’, ‘Helvetica’, ‘Arial’, sans-serif !important;
font-weight: normal;
font-style: normal;
}

h1, h2 {
font-family: ‘AvenirNextLTPro-Demi’, ‘Helvetica’, ‘Arial’, sans-serif !important;
font-weight: bold;
font-style: normal;
}

The Avenir font is showing up fine in Safari on my computer only. All other browsers and Safari on other computers default to Helvetica/Arial. I’m hoping an answer can be extracted from this – again, thanks for all the help!

Thanks Yigit. A couple issues happening now:

– When viewed on mobile at a normal vertical orientation, the caption titles now get cut off at the bottom. Note that I also have a Quick CSS code to remove the subtitles from captions when the screen size is below 480px (I found it was obstructing the image at small sizes). So essentially the subtitles should appear when the phone is rotated 90 degrees to a horizontal view.

– When the phone is rotated 90 degrees the captions and subtitles did move down, but:
1. There is still a large gap between the caption and subtitles (can we move only the caption title down towards the subtitle?)
2. There is still a large margin on the left (bottom margin looks great however).

Any help would be appreciated. Thanks again!

Thanks a lot guys, that seems to work.