‹ Home
Exported

Holy Family & CCTN - Orlando, FL

Gary Smith, Web Department Director at DiocesanBlake Stapleton, Web Designer at DiocesanVeronica Alvarado, Project Manager at DiocesanKyle Brown, Web Development at DiocesanMary Goeldel, DiocesanKyle Sullivan, Web Development at DiocesanSam Pohlman, Web Developer at DiocesanDanae Chudy, Web Designer at DiocesanNathalie Shultz, Web ConsultantChristine White, Marketing/Communications Coordinator at Holy Family Catholic Church Orlando StaffJulie Kreinheder, Director of Operations at Holy Family Catholic Church Orlando StaffDan Roberts, Systems Admin/IT at Holy Family Catholic Church Orlando StaffCody Armock, Web Content Specialist at DiocesanFermin Toro, Director of Network Operations for CCTN at Holy Family Catholic Church Orlando StaffLynn Ramsey, Holy Family Catholic Church Orlando Staff +9 others
From the list: Holy Family

✔ Homepage video needs to fit 100% width, but stay ratio (yes it will cut off some of the down carrot, but this is their choice and they need to see it this way.)

Veronica A. added this on
Completed by Kyle S.
Assigned to
Kyle Sullivan, Web Development at Diocesan Kyle S.

Comments & Events

Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
I updated /sass/site/primary/home/_hero.scss in the following way. This seems to be a reasonable compromise between being fold-focused and having a fixed aspect ratio (although there is a bit of an overhang at the bottom of the video at desktop size).
.page-template-homepage {
  .site-main {
    .homeHero {
      …
      .heroImage, .heroVideo {
        …
        video {
          width: 100%;
          height: auto;
        }
      }
Notified 1 person
Kyle Sullivan, Web Development at Diocesan
Kyle Sullivan completed this to-do.
Kyle Sullivan, Web Development at Diocesan Kyle Sullivan, Web Development
I also needed to add font-size: 0; to .heroVideo. This workaround makes no sense and shouldn't work, but as far as I can tell, it works, and it works across browsers.
Notified 1 person