alxfyv

You might try copying and pasting this in Design > Custom CSS:
/* ** in gallery grid, set a hover over slide effect to ** display slide title on partially transparent ** overlay */ .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper .image-slide-title { position: absolute; bottom: 0; width: 100%; height: 0; color: white; background-color: rgba(194, 194, 163, .8); opacity: 0; transition: all .25s ease-in; } .sqs-gallery.sqs-gallery-design-grid .slide .margin-wrapper:hover .image-slide-title { height: 40%; opacity: .9; }
This should give you the effect, on hover over a slide, of a partially transparent overlay sliding up over the image and displaying the slide title.
Let me know whether this works and, if so, whether it's the type of effect you have in mind.
-Steve

Put the following in the embed block:
<div id="Iframe-Liason-Sheet" class="iframe-border center-block-horiz"> <div class="responsive-wrapper responsive-wrapper-wxh-550x2000"> <iframe src="https://docs.google.com/document/d/1VouYUL9gPUHsjCvZPwHhZ1JQ8yMhIgTTI6md5Sn-5rE/pub?embedded=true"> <p style="font-size: 110%;"><em><strong>ERROR: </strong>An iframe should be displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe> </div> </div>
Put this in Custom CSS:
#Iframe-Liason-Sheet { max-width: 550px; max-height: 2000px; overflow: hidden; } /* inner wrapper: make responsive */ .responsive-wrapper { position: relative; height: 0; /* gets height from padding-bottom setting */ -webkit-overflow-scrolling: touch; overflow: auto; } .responsive-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; } /* padding-bottom = h/w as a % */ .responsive-wrapper-wxh-550x2000 { padding-bottom: 363.6364%; } .iframe-border { border: 1px solid #000; } .center-block-horiz { margin-left: auto !important; margin-right: auto !important; }
I have it working with this code on this /test page on my site. I'll leave the page up for awhile. I'll leave the pen Responsive-Iframe-REF up on CodePen permanently.
There is some extra height and some horizontal scroll at desktop/laptop sizes. I've been unable to modify this as the
<iframe> won't display at any size other than 550x2000. It's persnickety that way. I've not encountered one like it.
If you want to provide additional styling, padding, margin, box-shadow, etc., put the class names in the
<div id="Iframe-Liason-Sheet"> opening tag and add corresponding class rule sets in CSS.
If you need help with further CSS or anything, let me know. In any case, let me know how it works.
-Steve

Hi Jeff,
The background image and related CSS properties the home page currently has (at desktop sizes) are:
.collection-type-template-page #outerWrapper { background-image: url("http://static1.squarespace.com/static/560d7230e4b0a4c7e9582606/t/560e9ee2e4b01316733a433f/1443798754915/sitebghome.jpg"); background-position: center center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat;}
For an explanation of what the various background properties mean and do, see the w3schools' article CSS Background and the MDN article background.You must have uploaded the current background image to Squarespace. If you don't want to do the same again with another image but want instead to use an image off the web, just substitute the url to your new image for the current url (http://static1.squarespace....) and put the CSS in Design > Custom CSS. You needn't put all the background property declarations in Custom CSS, just the ones you modify.
If at first it seems not to work, add !important to the individual declarations. Thus, e.g., background-size: cover !important;.
Whatever declarations you change, you will need to enclose them all in a media query. Thus:
@media only screen and (max-width: 640px) { .collection-type-template-page #outerWrapper { /* property declarations here */ }}
I hope this answers your question. If not, let me know.