I've noticed when I try to resize the container of a header image or video on Squarespace, it doesn't resize the video or image inside of it. For example, on https://forgwinnett.org it looks like the video is only taking up half of the landing screen but it's actually not - the video is still rending at 100% view width and height but I'm covering up half of it.
This kind of stinks and isn't specific to this particular template. I would love to know how to make the video/image responsive.
div[data-url-id="pledge"] div.title-desc-wrapper.over-image.has-main-image.has-background-video {
height: 55vh;
}
This resizes the video container, but the video or image doesn't resize with it.
The problem is that your <iframe> element inherits the following:
.sqs-video-background .background-video {
min-height: 100%;
...
}
This means that no matter what height value you specify, the minimum height of your <iframe> element must be at least 100% of the parent element... which itself is absolutely positioned and has a height of 100%, making it fill the entire page.
Based on your use of height: 55vh !important on your .title-desc-wrapper element, I can only assume that you're wanting your <iframe> element to have a 55vh height. To achieve that simply:
Reset the min-height from your <iframe> element to initial.
Add a height of 55vh to your <iframe> element.
Now depending on whether you want this to display behind your page <header> or not, you'll need to either offset your <iframe> element's height by the height of your <header> (using calc(55vh + ...)) or adjust the top property to push the <iframe> element down so that this no longer happens.
You'll end up with something which looks like this:
Your iframe is set to a specific width:
<iframe id="vimeoplayer" class="background-video ready" src="//player.vimeo.com/video/181653249?api=1&background=1" style="width: 2640px; height: 990px; left: -729px; top: 0px;"></iframe>
Note the style="width: 2640px; height: 990px; left: -729px; top: 0px;"
I note that the value for left changes when the screen size changes in order to center the iframe under the content.
You need to either:
Make the iframe the same width as the page (auto), or
Make one of the parent divs between the iframe and the video the same width as the page, and centered.
Use "iframe#vimeoplayer" as as selector to add your own css to affect video resizing.. Thanks
You need to append this style:
.sqs-video-background {
height: 61vh;
}
Related
Per this WordPress site. I have a child div inside a parent with the following styles that forces it to full browser width even though the parent has a defined centered width. The following are the child's styles
.slider-controller
{
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 100;
}
I have a plugin called Metaslider that prints a full browser width slideshow inside this child div. The problem occurs when I place content in the parent div. The child's variable height overlaps the content in the parent when the browser width is modified. How would you approach making this content stay below the child regardless of browser width?
I appreciate any thoughts you may have on this.
I wasn't able to ascertain exactly what the slideshow height is, but since:
you want the first paragraph in <main> to always begin just below the slideshow
the slideshow has a consistent relative height (relative to viewport
width)
The following style declaration - using viewport width units (vw) - will take both of these considerations into account:
main p:first-of-type {margin-top: 48vw;}
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.
Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/
Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%
html, body {
height: 100%;
width: 100%;
}
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
or you can use Jquery.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!
When is comes to responsive design there are many creative ways to approach the issue at hand.
You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.
eg.
html, body {
height: 100%;
width: 100%;
}
From there you can play with your site containers and go more specific.
Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:
<!-- hide script from old browsers
//<![CDATA[
var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight
function sniffer() {
var el=document.getElementById("body");
if(screen.width<=600) {
el.style.width='100%';
el.style.height= windowHeight;
el.style.margin="auto";
}
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->
The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.
Hope this helps!
I'm trying to have a background image repeat x and y to the bottom of the page.
The background image pattern div is
#pattern {
height: 3000px;
width: 1000px;
background:url(../images/patterns/pattern1.jpg) repeat;
}
In the html, it resides inside
#wrapper {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: left;
}
The height on #pattern is set to 3000px just so it will show up, otherwise the image will not appear.
I have tried various things such as:
height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;
I would like the background image to repeat to the bottom of #wrapper, to the bottom of the page.
Webpage is here:
Thanks so much.
You've set a fixed height on the wrapper, so it'll stop at 3000px, regardless of how much content is in there. Try a min-height instead. That'll keep it at a minimum size so it's visible,but allows it to grow to fit the content in it.
Try giving the #pattern a position:fixed; so it doesn't matter how much content you have to scroll, it won't scroll itself.
Side note: repeat is the default property for background image so no need to declare.
Your HTML is wrong. The #pattern div should contain the rest of the page. You want it to grow with the contents.
Your interior divs are all absolutely positioned, making it impossible for them to influence the height of the container #wrapper, which is where you'd want to put your background image code.
Also, I'm not sure if this is intentional, but #pattern doesn't wrap any of your content, so it's height has to be manually set, since it has no children.
There are two approaches you can take. Use Javascript to determine the combined height of your absolutely positioned divs and set the height of the pattern to that number.
Or, you can use float to arrange your columns, and put a at the end to force the parent container to be that tall.
The div tag containing the #pattern style should start on the first line after the body tag and close at the end of the page just before the close of the body tag.
BTW, remove the height and width attributes or set it to 100% so that it repeats throughout the page.
I want to repeat a background-image for a div vertically till the bottom of the page.
#repeat {
background: url(repeat-image.png) repeat-y;
height: 100%; /* this does not work, but height: 1024px; does */
}
This does not work. I need to do so according to the page design that I have got. Can this be done?
With regards
Vikram
try to set height:100% for your <body> and <html>, too. if there is nothing except this div on your page, 100% height will be 0px without these settings.
For web pages, height is a funny thing. Since web pages expand vertically, the total height of your page can actually be 0. You may consider using min-height for each element that requires at least a certain height. You can use height: 100% to fill the full height of the parent.