I put videos (in ) to the 3 column layout using "column-count 3". And every time when I hit play button on the second or third video on top, I got it jumped to the bottom of the previous column. It happens only in Chrome. In Firefox it's perfect as expected.
I tried to apply all the tips regarding similar questions I've found on StackOverflow, however, none of them works for me (including addition of the translate property to the wrapping container). Could you please help me with that?
Here is my code (Jade):
.column-list.column-list--three
each video in content['pausecast']
+video-panel(video)
mixin video-panel(obj)
.video-panel
.aspect-ratio
iframe(scrolling="no" frameborder="0" src="//www.youtube.com/embed/"+ obj.youtubeId.replace('watch?v=',''))
.aspect-ratio
position relative
width 100%
height 0
padding-bottom 51%
// transform translate3d(0,0,0)
.aspect-ratio iframe
position absolute
width 100%
height 100%
left 0
top 0
.video-panel
border-bottom grey 2px solid
margin-bottom 40px
I definitely cannot go to any fixed heights or widths as I need it to be flexible while resizing + keeping correct aspect ratio. So applied changes should be minimised as possible. Thank you in advance!
Well, the solution that worked for me was to get rid of column-count and use other grid instead. Used Jeet and col(4/12, cycle: 3). That's it. Very weird behaviour of column-count + position absolute.
Related
I need your help!
Been searching for a solution, but couldn't find one, so thought I should just ask it.
For a school project I need to postion a random number of halls into the right position on a map.
As an example I just used 4 halls an just hard coded all the info that's retreived from a JSON with Angular as you can see in this CodePen
<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>
I already have solved the issue of resizing the halls, when the page gets resized.
The only problem that remains is that the absolute positioning with top isn't working like it should.
Everything is calculated with a width of 1000px and a height of 500px in mind, but it should all resize if the browser also resizes.
Also getting the parent to adjust to the right height is something I struggle with.
Can somebody please help me with this?
The problem is that when using the top property, percentages are calculated based on the height of the container, not its width.
To fix this, set the top to 0 and then use margin-top: x%;. All margins are calculated based on the container's width, so the margin-top will shrink as well when the window is resized.
I've never before run into a CSS problem I couldn't seem to figure out, but I'm just baffled by this one. I have a element in which I'd like to have a fixed background image, and I'm intentionally using an image that's quite a lot larger than the element because I'm not using media queries for this particular project, but rather just want to have the image scale to the element width. For some reason, however, when I switch the background-attachment to fixed, the image uses the boundary of the parent element as it's reference point.
I'm using the Foundation 4 framework (I use it all the time), and as such the parent element is a row class, so that's worth noting, but I can't figure out what about that might cause this problem. Here's the style definition I'm using (I've broken the background declaration apart for trouble-shooting). Ideas, anyone?
#page-content {
min-height: $publicContentHeight;
background-color:rgba(255,255,255,0.25);
background-image: url('../img/paper_phren/pages.bg.fludd.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size:contain;
background-attachment: fixed;
box-shadow:0px -5px 10px rgba(0,0,0,.3);
}
Hard to say without seeing your use case, but I've found that background-size doesn't work well for scaling an image to fit the width of any screen size without overflowing it's container. What most seem to do, and what I've now adopted, is just using an img element for the background. Yes, it's not as semantically accurate, but the control you gain is beyond worth it. Microsoft.com along with many others are using this for scalable background images.
Are you trying to fill the element and therefore don't mind if the background image scales outside of the element on either the height or width depending on the ratio? If yes, try: background-size:cover;
Foundation + off-canvas + chrome + background-attachment: fixed = problem. Or so I have heard....
http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story
"1- Only in chrome for windows(or so internet say): background-attachment: fixed behave wierd with animations. Specially if you wrap a self animated offcanvas around all your fixed backs.
Notice: this has nothing to do with Zurb, but with chrome."
I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}
I am working on a responsive grid system for a project. The grid is made up of blocks which are floated left and have a width of 25%.
Inside these block are are images which are set to either 100% *height/width* or 50% *height/width*.
All the images within the blocks a butted up next to each other, and all the blocks are butted up next to each other so it looks like a seamless grid of images.
The issue I'm getting is at certain browser sizes or when you resize the browser you get a little 1px gap between certain blocks.
An example can be seen here:
http://dahliacreative.com/responsivegrid/
I think it may be down to the blocks floating as if you take the float off all seems fine.
I tried using display: inline-block etc, but couldn't get anything working!
Does anyone have an idea to fix this ?
This is due to using full round percentages such as 50%, when you get to certain widths and heights (e.g 561px * 393px) then those won't divide into 50% evenly hence this remaining 1px gap.
Have a look at twitter bootstrap CSS to see the percentages done to 6 decimal points to avoid this issue.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* TO FIX 1px Foundation 5 bug fix*/
You can use the new css3 with colum gap and column count.
column-count:
column-gap:
Chris made a really good example with images, which is related to yours.
You can do almost the same thing with li or table or so on elements
Make sure to use prefix and doesn't work in IE less than 10
http://css-tricks.com/seamless-responsive-photo-grid/
When the browser gets stretched from its width, the header doesn't move, but the content of the page does. It's driving me nuts. If you stretch it far enough, the banner eventually ends. IE: it doesnt repeat further the banner.
Any advice? I'm not sure which part of the source code would control this. I'll put the CSS up and if needed, I can throw up part of my HTML.
Image Examples
Web
Without seeing your markup (which would be helpful to share), it looks like line 9 is your problem:
header#mast{margin:0 0 0 0px;width:1200px;position:fixed;top:0px;left:0%;z-index:100;}
Update it to:
header#mast{margin:0 0 0 -600px;width:1200px;position:fixed;top:0px;left:50%;z-index:100;}
(Note the left:50% and -600px left margin (half the width of the element).
If you wrap your #mast and #primary-nav' elements in adivthat has a style ofmargin: 0px auto` this should cause everything to continue to center with the rest of the page as your expand the window.
As far as the banner ending is concerned, add the style width: 100% to the element that is responsible for it for the resulting infinite expansion as you widen the window.
EDIT
Since you've added the website, put the contents of the header in the following tag:
<div class="container container-twelve">...</div>
This will center your image, text, and links.
It was a large combination of difference changes that were answers. Basically it came down to a number of width changes.
If I set width 100% in one place, it had to go in multiple ones because the entire mast div was nested divs. Also, to get the banner to expand further to right, it had to be 200% for width.
The proper code is reflected in the website, at least for my solution.
Thank you everyone, and specifically TMan.