Captions over video, placement

Followed the advice of a previous thread on this site on placing captions over video (here). This worked very well.

My problem is that the text, on mobiles and tablets, goes beneath the lower edge of the video - with the first line often starting at >50% from the top edge of the video. The behavior is not consistent and is worse on chrome (both in desktop viewport testing and on a device).

Changing the value of the ‘top’ attribute, disappears the text completely on Firefox.

Is there a more reliable way of placing the text, so it is anchored to the top edge of the video frame? That way you could at least pad it out?

I also added, responsive text via, custom CSS rule:

/* ensure front page slider is responsive*/
@media screen and (max-width: 600px) {
.sydney-hero-area	.text-slider .maintitle{
		font-size: 2em;
	}
	.sydney-hero-area	.text-slider .subtitle{
    font-size: 1em;
  }
}

/* for the 'about page'
/* change title and padding on 'about page' sidebar */
#pg-25-1 h3.widget-title{
	font-size:24px;
	text-align:left;
	padding-top:25px;
	padding-left:20px;
}

I have been through disabling plugins, removing all but the specific CSS rules and trying to diagnose through developer tools.

Hello there,

In the topic you are referring to contains several jQuery code. Which one did you apply? Please share your final code here, so I can reproduce it on my test site. Probably I could suggest you with some CSS code to re-position it.

Regards,
Kharis

Hi Kharis

Apologies for the delay I have been away, code copied from the thread:

    (function($){

        "use strict"

      if( $('body').hasClass('home') ) {

        var mainTitle    = 'Word Class Fibre Networks';

        var subTitle     = 'Residential & commercial: fast service, flexibility & choice';

        var buttonURL    = '#about';

        var buttonLabel  = 'Find out more...';

        var heroContent  = '<div class="slide-inner">';

            heroContent += '<div class="contain text-slider">';

            heroContent += '<h1 class="maintitle">'+mainTitle+'</h1>';

            heroContent += '<P class="subtitle">'+subTitle+'</P>';

            heroContent += '</div>';

            heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';

            heroContent += '</div>';

        $('.sydney-hero-area').append(heroContent);

      }

    })(jQuery);

Also some CSS I have used to affect styles on the page:

     /* change text for front page slider title*/

    .text-slider .maintitle{

           font-size:5em;

           font-weight:600;

           font-family:"Lato";

           z-index: 10;

           color: #fff;

           margin: 0;

           letter-spacing: 1px;

           text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);

    }

    /* change text for front page slider subtitle*/

    .text-slider .subtitle {

           font-size:3em;

           font-weight:600;

           font-family:"Lato";

           z-index: 10;

           color: #fff;

           margin: 0;

           letter-spacing: 1px;

           text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);

    }

    /* ensure front page slider is responsive*/

    @media screen and (max-width: 600px) {

    .sydney-hero-area   .text-slider .maintitle{

                  font-size: 2em;

           }

           .sydney-hero-area   .text-slider .subtitle{

        font-size: 1em;

      }

    }

Best regards

Mark

No problem Mark. And thank you for sharing.

Please try adding this extra CSS code:

    .sydney-hero-area {
       position: relative;
    }

Regards,
Kharis