I'm working with a template from HTML5up named "Read Only". I have inserted a video player into the code, but there is too much space between the banner and my player. With some help I found the following code in a style sheet:
#main > section > .container { padding: 4em 0 2em 0; }
When I changed padding: 4em
to a null value, it moved the player up, but there is still a big space between banner and player.
There is also box coding in the style sheet but when I changed a box-sizing code from "border-box" to "content-box" it made no change whatsoever.
I have tried using the F12 key and opened up the debugger, but I don't know what I'm really looking for.
So I think I don't know enough about what box-sizing is doing and how to change it. Currently the page is located at:
http:vrocchio.net/up2/index.html
Please let me know what other information I can provide to help out.
Hi roboy, You problem comes
Hi roboy,
You problem comes from this:
#one:before { background-image: url("../images/banner2.png"); background-position: top right; background-repeat: no-repeat; background-size: 85% 60%; content: ''; display: block; height: 15em; width: 100%; }
Specifically the height,
Tony, Thanks. I tried
Tony,
Thanks. I tried changing that value before, but only after I had determined the height, in essence, in the background-size code. After I chopped away the em value I could increase the value percentage of background size and voila! The player moves closer and I can actually control the dimension of the image.
Thanks!!!!
Two variables, that was a toughie!