diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index c7e758003..d1c729938 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -53,15 +53,20 @@ article { padding: 0 0; position: relative; + /* TODO[team-delightful]: Remove background and background-size a few days post merge to avoid caching conflicts */ .image { position: relative; width: 100%; margin: auto; max-width: 1024px; + z-index: 2; background: transparent no-repeat center center; background-size: cover; - z-index: 2; - padding-top: 42%; + height: 42vw; + + @media screen and (min-width: 880px) { + height: 370px; + } @media screen and (min-width: 950px) { border-top-left-radius: 2px; diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb index 5707563a0..e6a5f22fd 100644 --- a/app/views/articles/show.html.erb +++ b/app/views/articles/show.html.erb @@ -131,8 +131,7 @@ <% if @article.video.present? %> <%= render "articles/video_player", meta_tags: true, article: @article %> <% elsif @article.main_image.present? %> -