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;}
Related
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;
}
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!
Can you help me with my dilemma? I have a container (BODY in this case) that has position:relative set. Inside it I have two div's. One relative and one absolute positioned (in this order).
The problem is that whenever I set some margin-top to the relative positioned element, the container's height (body in this case) stretches vertically.
For example, even though I have set height: 100% to the container, its size when viewed is 100% + the margin-top of the relative positioned child element.
Here's a fiddle:
http://jsfiddle.net/xJ75R/7/
First of all, you should not give a relative position to the body, since body takes up the whole page.
Anyway, be specific when applying the relative position to another element, so if you have a class of "lists" then use
.lists { position: relative; top: something; left: something }
or margin, or whichever rule.
If you are just having problems with the body tag after giving some margin to ANOTHER element (though I do not see how this would happen), then give the body a margin of 0, like:
body { margin: 0; }
and if that doesn't work then use !important like
body { margin: 0 !important; }
On a side note, use firebug addon for firefox to make your CSS life easier and see what's happening on the fly.
I have a ul that's the height of the page. I'd like it to be able to scroll inside of that ul. That can be seen here: http://d.saew.it/pRyz
As you can see, it can scroll as the height of the page. Now, I also want it to have a header, as you can see there. It should be "fixed" on the top, but the width of the ul list is variable, therefore I can not set it to fixed as it can't be centered in a parent of variable width.
Now, what I have works almost perfectly, except for the fact that the height: 100% of the ul to be the height of the parent (same as the window), while the div header still takes up space above it. Therefore, this throws the ul a few pixels off the end of the parent element. Check it out: http://d.saew.it/NXL1
Is there any way of accomplishing what I'm trying in pure CSS?
Edit:
The code is in stylus, but anyone should still be able to read it:
div.ul-header
background-color #E6E6E6
text-align center
margin 0
ul
background-color #E6E6E6
height 100%
margin 0
overflow-x hidden
All parents of these elements have height: 100%; on them to allow for it to reach the window's height.
I'm not totally clear what you want, but this is my best guess.
Basically what you're doing is using absolute positioning and overflow rules to control what scrolls, and where it appears.
The container holds both the header and the scrollable list, and has height: 100% within the page body. It also has position: relative so that its child elements can be positioned absolutely.
The child elements - the header and the list - both have position: absolute. This is so that you can force the list to have a height that's both restricted (so its content overflows) and variable (according to the height of its parent), i.e. it should always be exactly the height of its parent, minus the height of the header. Note that the value of its top property needs to correspond to the total height of the header - including padding and border.
Then to get your scrolling list, you can just use overflow: auto on the list.
To get your centered text in the header is as simple as text-align: center, which will work no matter the width of the container.
Have a strange problem (strange because I do not understand it)
Trying to use jQuery UI Tabs with 100% height and a vertical overflow scrollbar for the content.
This does not work - the scrollable area is bigger then the visible area resulting in the lower part of the scrollbar to be below the visible area. Looks like the scroll area is extended with the height of the list area.
The problem is only valid with 100% height (have testet this in different ways). As soon as I set a fixed height (in some way) the problem is gone???
Have after some test found out that the UI is not to blame and the problem is also valid with native list items.
My setup is this:
I need to use all available space (complete iframe, div, window)
I do not know the height of the top list.
I need to use the remaining space for content with vertical overflow
Will not use a script to modify the height (must be possible with CSS and HTML5 alone)
You can see a demonstration here:
http://jsfiddle.net/beasty/6cAat/10/
Any suggestion on how to fix it?
Thank you
Benny
The css property height: 100% has no effect on relatively positioned elements.
<div style="position: relative; height: 100%; border-style: solid; border-width:2px;">
<div id="contenttab" style="position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow-y: auto;">
Looong text
</div>
</div>
Here's a slightly better way to do this. You'll still have to determine the height of the list above the absolutely positioned div.
This is because the top-level div element has its overflow hidden. Its child div element extends beyond the height of its parent because its height is 100%. The browser calculates the height of the parent, which in this case is 643 pixels. So the child is also 643 pixels, even though it has to share the visible space with the unordered list, which is 60 pixels in height. Therefore, 60 pixels of the child div element is hidden from view.
As a solution, you could set the height of the ul to 10% and the child div to 90%. But be careful! You're using borders which aren't included in the height declaration, so you'll still lost a certain amount of the child div exactly equal to the number of pixels of border you're using. Also, if the ul ever grows, its contents could be cut from view as well. It's probably a better idea to not specify a height for the child div or the ul and instead allow the parent div to overflow-y. Otherwise it kind of seems "frame-y".