I have 2 divs:
Player Div which contains bootstrap:embed-responsive (16x9 size)
Episode Hints which contains recommended videos using scroll. (the rest)
I was trying to reproduce this in jsfiddle, but didnt succeed, if you can please access this link:
beta.indiamea.org/#/seriale/view/Ektharajaekthirani/15669
For now the height is set to 475px which is not responsive comparing to the player.
What i am trying to achieve is that the second column for episode hints to take the height size of the first player.
Please help me & sorry for bad explanation, but this is my first time asking here.
Related
Help a Junior.
2 Problems:
Video does not cover the hero section of the webpage
Page cannot extend past "investment" section
Will post pictures
Ive tried increasing the height to an large arbitrary number, Ive tried object fit:cover, ive tried 100% width but that just shrinks the entire video,
Ive tried a large height, dont see any other solution. Please help
Stackoverflow only lets you attach one picture, so I think problem 2 can be explained in words.
Thanks
I am very new to coding so sorry if I don't really know how to ask this question. My teacher wants us to line up a bunch of divs inside of a container div, which I have successfully done. The problem is that he wants it so that when the browser window gets smaller, instead of a scroll bar appearing at the bottom, he wants the divs to start popping below all the other ones. I can get them all to line up and center easily, but I've been trying for 5 hours to get it where they do what he wants and I can't figure it out. Of course, it's 4th of July and the Weekend, so this is my only option. I can't even begin to add all the code I've tried to make this work, but it's all been super basic (it should be, it's a freaking beginner class and I'm 3 weeks in). I can't find anything at all about how to do this, pretty much every video and thing I've read says
display:flex;
align-items: center;
justify-content: center
which works great, it just doesn't "wrap" (is that the word? that's what he was saying, but using that in my searches is not helping one bit).
Anyway, hoping the picture helps explain what on earth I mean. I'm good as far as creating the look and the top image he wants, all I need help with is how to avoid a scroll bar appearing when the window get smaller. Thank you!!!
enter image description here
All you need to do is add flex-wrap: wrap; to your container.
CSS Tricks has made a comprehensive guide on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flex-wrap
I am trying to shrink the width of a well-sm but I run in to trouble at some smaller sizes. The form will float left or right depending on the specific size.
An example of the issue can be seen at the link below. Otherwise the page remains responsive when the width is left at 100%.
http://casouza.com/homelist
I don't think this will solve your problem but you should know that line 147 and 148 should be reversed, according to IE. The form close tag should be inside the div close tag for well-sm. Also, I'm only seeing the error on IE, not on Firefox or Chrome. It might be easier to get help if you made a jsfiddle or something - I can't replicate the error easily without all your files. Thanks.
I'm doing a website that needs to have layout such as the one here:
http://newsmartwave.net/wordpress/trego/home/homepage-1/#featured_products
I've spent 2 days researching how to do proper 2 column layout and tried different options, but none seem to work just right.
Right now I have 2 versions - http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html
The problem with the first one is that if you reduce the height of the browser's window considerably I end up with some white space bellow the sidebar and some of my text ends up outside the border (see screenshot).
The problem with eh second one is that I don't can't place a full-screen background image behind both columns.
In addition, unlike on the sample website ( http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html) that I'm trying to duplicate, I'd like to have a vertical scroll bar appear if browser's window reaches certain minimum height.
I know people sometimes get annoyed with types of questions, but I really just can't figure this out and I did read numerous articles and examples.
I'm not asking to write code for me, although any code samples would be most appreciated. Minimally, I was hoping for directions for some good tutorial, as I really would like to master this layout. It comes up a lot in my work and I'd like to have my own code that I have 100% understanding of rather than using Wordpress.
For the 1st one, add overflow: scroll; to the #sidebar > .row rule.
You do have a fullscreen background image in the second one. It's just that #maincontent, which is in front of it, has a background:white; rule, so you can't see it.
Edit: I did not get annoyed by the way..
I have a site where 3 pages have a row of images that can be viewed larger upon rollover. On 2 pages the alignment works fine, these have 6 images in the row. The third page which is not working properly has 5 images per row.
The pages with 6 images are aligning perfectly - the left-most image is on its own, floating left, the other 5 are in their own divs within a div (movers-row) and are spaced 20% apart. The code for this working page is here: http://jsfiddle.net/AvNJY/
So using the same logic I tried to get the row with only 5 images to align, again doing the same as above and setting the distance to 25%. This made the last image in the row jump below the others. I played around with the percentage and for some reason at 24.4% it looks as if it's aligning correctly in all browsers apart from Firefox, when viewed at 100%. However as soon as you enlarge the site in any browser, the last image jumps again below the others (in Firefox this happens automatically). I am wondering what I am doing wrong on this page as I've tried everything I can think of - and can't understand why the 25% isn't doing it. The code for this page is here: http://jsfiddle.net/9K74d/
I would really appreciate some help if anyone knows the answer. Thanks in advance!
Your example in jsfiddle, is not clear but try the following:
add overflow:auto for #studiomovers-row and remove the margin of this id.
It's probably a rounding error - browsers can be surprisingly poor at math and make unexpected rounding errors. Knock your % down to 24 or even 23 and see if that works. You can always try putting the images into a single div container, sized to the correct, expected size, and set overflow: hidden in case there is a pixel or two that runs over. That gives you a little margin of error and it's much better than having the layout break.