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
Related
So, i'm trying to design my first page, and kinda trying to learn as i go.
I'm trying to design a one page website, that contains multiple backgrounds, so i divided each section of the website that will contain a different background into divs.
The background looks fine with a full sized window and 100% zoom on the page, but if i zoom in it gives me the option to scroll the page horizontally and it gets messed up, id like to make it so it just simply scales and it does not give me the scroll option.
I've tried setting the background size to cover the page, messed with the width of both the body and the div that contains the background but i can't seem to get it to work.
So, this is part of the page with 100% zoom:
Fully scaled window 100% zoom
But when i reduce the window: it looks like this:
Gives me scroll option and the background image cuts out
Heres the HTML code:
HTML code
And heres the CSS:
CSS code
Thanks, sorry for noob question.
Alright i think i found a solution while just trying different stuff out:
i put on the html and body css:
overflow: auto;
It seems to have fixed my problem, i was kinda of just randomly trying stuff out.
Thx for the help.
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.
I am working on a project now, and it has a weird bug which I don't understand. Here is what is happening: if I keep clicking on different products on a page to expand and close, after I keep clicking on 4 or 5, the page seems like it scrolls up or down sometimes with a jerk. This effect can also be viewed in this video: https://www.dropbox.com/s/u13hec76kwk1r9e/ghosts%20in%20product%20page.mp4?dl=0 (see at 0:16)
Here is this page: http://protec.bluebeetle.me/html/app/products.php?cat=microphones
And here are the login details:
User : you
Password : awesome
Thank you so much for your help guys.
The issue was the sliding logos after the main hero slider. I am using jQuery.carouFredSel-plugin for them. Because they had different sized images the height of the parent logo slider container was varying weirdly up and down. Fixing the height of the div inside the logos container fixed the issue.
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.