diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index 5aa47cdcc5..c561d437a6 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -564,13 +564,13 @@ #home-features-arrow-green { position: absolute; - left: 173px; - top: -122px; + left: 154px; + top: -98px; @media (max-width: @screen-sm-max) { height: 100px; - left: 111px; - top: -84px; + left: 120px; + top: -60px; } } diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less index c40e69e3b2..46a1792677 100644 --- a/services/web/frontend/stylesheets/app/website-redesign.less +++ b/services/web/frontend/stylesheets/app/website-redesign.less @@ -214,20 +214,14 @@ flex-wrap: wrap; align-items: center; - .features-card-image { + .features-card-media, + .features-card-media-right { + padding-top: 24px; + img.img-responsive { width: 100%; } - @media (max-width: @screen-sm-max) { - margin-bottom: 50px; - } - } - - .features-card-video { - display: flex; - justify-content: center; - video { box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12), 0px 8px 16px 0px rgba(30, 37, 48, 0.12); @@ -236,18 +230,21 @@ width: 100%; } - video.video-w-md-90 { - width: 90%; - @media (max-width: @screen-sm-max) { - width: 100%; - } - } - @media (max-width: @screen-sm-max) { margin-bottom: 50px; } } + @media (min-width: @screen-md-min) { + .features-card-media-right { + padding-left: 64px; + } + + .features-card-media { + padding-right: 64px; + } + } + .features-card-description, .features-card-description-list { padding-top: 16px; @@ -322,8 +319,10 @@ } .features-card-hero { - /* borrow from features-card, but rewrite if needed before adding too many overrides */ - .features-card; + display: flex; /* equal heights */ + flex-wrap: wrap; + align-items: center; + position: relative; height: 655px; padding-top: @line-height-computed * 2;