Develop Reference

How to center a play button on a responsive video element

I am making a video player using the HTML5 video element, I have a play button that will start the video. However my problem is how I can get the play button to sit in the centre of the video. Using position or margins to push the button into the centre of the video will not work, as when you resize the window and therefore the player, the play button will move out of place.
I've tried using positioning - left/top etc, and I've used to margins with the same concept, however these do not work with a responsive video player, I'm lost with how to deal with this and was wondering if anyone had suggestions.

For centering any thing (img, icon, text etc)
.parent_item{
position: relative;
}
.center_item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.parent_item is your video wrapper class while .center_item is you play icon or button, Also it's responsive.

You need to use media queries of CSS for adding padding and margins for a different size for different devices.
Following media queries will help you to code. Put your padding and margin CSS code inside it for varies device viewports.
<style>
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
#media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
#media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
#media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
#media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>

Bootstrap datepicker adjust position and size on small browser screen

My Bootstrap datepicker currently displays at the bottom left of the textbox, thats ok in a normal browser window. But the issue comes when the browser window is made small or resized. I want to make the datepicker display top left when the browser window is made small . Also on small screen I want the datepicker to become small also , but it should be readable and should also look good
Any help would be greatly appreciated

You want to use CSS media queries for different resolutions. eg.
#media (min-width: 768px) {
.some-class {
float: right;
width: some_width;
height: auto;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.some-class {
float: left;
width: some_smaller_width;
height: auto (or some specific height);
}
}
more: w3schools/mediaqueries

How to adjust contents to automatically fit size of the screen?

I have an requirement that an application(HTML, CSS and Javascript) should adjust automatically to screen window size - from laptops, to desktops to tablets.
Does anyone know how can this be done?

You need to study Responsive Design. But I'll tell you the big key: media queries.
With CSS like this
#media only screen and (max-width: 500px) {
#mydiv {
width: 80%;
}
}
#media only screen and (min-width: 501px) {
#mydiv {
width: 50%;
}
}
you can do all you need. In fact, for some screen sizes you can set #menu1 to display:none, and #menu2 to display:block, and thereby show entirely different layouts dynamically based on the screen size.
Try this link for a very minimal example you can play with
http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_breakpoints

Automatically Resize Images After Certain Width

So I have a webpage with a banner (1024 pixels) and then some pictures in the center region below. I'm looking with CSS (or some other alternative) to start resizing all the images (banner and page icons) downwards automatically if the size of the page in the browser is less than the minimum banner width and if it greater than this minimum size, none of the images are scaled (the banner is on a transparent background so it "resizes fluidly").
This seems like a pretty basic question so I doubt it'll really require all that much but all the other references I saw didn't do it for me (and I am really inept at CSS). Any advice is appreciated and thanks in advance!

Use media queries in your CSS - something like this:
#media screen and (max-width: 400px) {
#container {
width:320px;
}
}
#media screen and (min-width: 401px) and (max-width: 900px) {
#container {
width:700px;
}
}
#media screen and (min-width: 901px) {
#container {
width:900px;
}
}
(You can adjust the numbers/brackets).
Then set your image widths as a percentage of the container.

stopping bootstrap template from shrinking after a certain point

I've been wondering if there is a way to stop bootstrap from shriking after a certain point. I like the way my website looks 700 px width. so is there a way to stop bootstrap from shirking my html after that point?

I think that, as mentioned in question Twitter bootstrap minimum width in responsive layout, you can set min-width CSS property to 700px for any element you don't want to be narrower than 700px.
Say you have a div called "wrapper" that wraps all of your page contents:
<div id="wrapper">
<!-- All contents in here -->
</div>
You can style it like this:
#wrapper {
min-width: 700px;
}
NOTE: If you are using responsive layout, you will also have to comment the styles you want to be disabled in bootstrap-responsive.css file.
So, when using responsive layout, if you want your site to be displayed 700px wide, you will also have to comment the styles under:
#media (min-width: 768px) and (max-width: 979px) {
#media (min-width: 1200px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
And leave the CSS rules (but removing the #media and the brackets) of styles under:
#media (max-width: 767px) {
Hope that helps!