From 189b9026f9c7cc29a3879da0e702698986d58f47 Mon Sep 17 00:00:00 2001 From: Ian Weller Date: Mon, 11 Apr 2016 08:37:14 -0400 Subject: [PATCH] added responsive styles to slideshow caption --- css/app.css | 14 ++++++++++++++ header.php | 2 +- scss/_slideshow.scss | 18 ++++++++++++++++-- 3 files changed, 31 insertions(+), 3 deletions(-) diff --git a/css/app.css b/css/app.css index 0e47e38..c8aaf77 100644 --- a/css/app.css +++ b/css/app.css @@ -6697,6 +6697,8 @@ h2#block-title { @media screen and (max-width: 1130px) { #slideshow #cat-text p { margin-bottom: 15px; } } + #slideshow img { + min-height: 267px; } #slideshow .nivo-caption { background: transparent; width: 1200px; @@ -6716,6 +6718,18 @@ h2#block-title { font-size: 18px; padding: 0; margin-bottom: 30px; } + @media screen and (min-width: 795px) and (max-width: 849px) { + #slideshow .nivo-caption p { + width: 375px; } } + @media screen and (min-width: 728px) and (max-width: 794px) { + #slideshow .nivo-caption p { + width: 350px; } } + @media screen and (min-width: 641px) and (max-width: 727px) { + #slideshow .nivo-caption p { + width: 325px; } } + @media screen and (max-width: 674px) { + #slideshow .nivo-caption p { + display: none; } } #slideshow .nivo-caption a.button { text-transform: uppercase; background: transparent; diff --git a/header.php b/header.php index 3e536e3..4617c06 100644 --- a/header.php +++ b/header.php @@ -17,7 +17,7 @@
-
+
  • Bill Pay
  • Check Email
  • diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss index 8582bfc..fde4a16 100644 --- a/scss/_slideshow.scss +++ b/scss/_slideshow.scss @@ -39,8 +39,10 @@ margin-bottom: 15px; } } - - } + } + img { + min-height: 267px; + } .nivo-caption { background: transparent; width: 1200px; @@ -61,6 +63,18 @@ font-size: 18px; padding: 0; margin-bottom: 30px; + @media screen and (min-width: 795px) and (max-width: 849px) { + width: 375px; + } + @media screen and (min-width: 728px) and (max-width: 794px) { + width: 350px; + } + @media screen and (min-width: 641px) and (max-width: 727px) { + width: 325px; + } + @media screen and (max-width: 674px){ + display: none; + } } a.button { text-transform: uppercase; -- 2.17.1