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>
Related
I was wondering if there is a way to know if the user is using a small device. I want my navigation menu to change if the user is using a small device or if he is using a desktop. I want it to be similar to col-sm
you can use CSS media queries for the responsive website or different size of devices. You can use CSS as according to mobile orientation also.
<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>
This is what #media queries are used for in CSS.
#media screen and (max-width:479px) {
.navbar {
// style of .navbar when screen is less than 479px
}
}
#media screen and (min-width:480px) {
.navbar {
// style of .navbar when screen is 480px or larger
}
}
I've designed a sign up box for my website using semantic ui. I used semantic ui card for image and it's center aligned. Then I put "Upload a photo" button underneath the image(not fluid because I need the button resize to the width of image when mobile).
I gave width for button manually and center it. Now it's looking good. The problem is the mobile version. It didn't scale to the image size when mobile because it's fixed width.
This is my code
<button className="fluid ui large red button upload-btn">Upload a Photo</button>
.driver-upload-btn{
width: 30.4%;
margin: 0 auto;
margin-top: 12px;
}
Do I need media query? I'm stuck here
you can try this,
#media screen and (min-width: 320px){
.driver-upload-btn{
width: 10.4%; //set width as whatever u want
}
}
// Media query list
#media screen and (min-width: 1024px){}
#media screen and (min-width: 768px){}
#media screen and (min-width: 640px){}
#media screen and (min-width: 480px){}
#media screen and (min-width: 320px){}
I have been searching around and have found no answer or solution for this problem:
I would like to enable bootstrap responsive only when users are using mobile devices. In other words when users are using computer browsers, responsive will be turned off, meaning no matter how the user resize the window, there is always a minimum width for my container and responsiveness will never kick in.
Is there any way to do this by default?
with bootstrap 3: just add a new class to yours containers, like cFixed, and only in the 'min-width: 768px' media-query set your container dimension et voila
#media (min-width: 768px) {
.cFixed{width:1174px}
}
We need to add an extra responsive stylesheet css/bootstrap-responsive.css
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
And following are the supported devices
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Responsive utility classes
You can separate your responsive and non-responsive styling by device width in CSS.
#media (max-width: 767px) {
/* Responsive styling */
div {
width: 50%;
}
...
}
#media (min-width: 768px) {
/* Non-responsive styling */
div {
width: 500px;
}
...
}
Note, this does not determine if the device is mobile or not. To do that, you could make use of open source JavaScript (i.e. http://detectmobilebrowsers.com/).
I have develop a complex responsive webpage layout using Bootstrap 3. The layout nicely shows the arrangement & display as expected on different screen size.
However, is it possible that I can disable the responsive for certain case use so that I set the specific layout display such as xs, then it will shows xs layout no matter what screen it is?
I am thinking could it be done by using JavaScript lying #media queries? Or, it could be easier done by using other method?
in a way a interesting question.
Have a look at this Fiddle and resize the window slowly so you can see what is happening with all the Bootstrap col-XX-XX at the same time.
I have set up groups of cols to show you what would happen if you just used the XS class... as is for what you want to do.
When resizing the window watch how the other classes vary compared to the violet ones which are the XS cols.
You can also if needed roll your own here and set your own breakpoints.
Full size Fiddle here.
It's totally dependent the way you used media query and your need
Use below as per your need
#media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
}
#media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
}
#media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
}
#media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
}
#media only screen and (device-width:768px){
/* default iPad screens */
}
/* different techniques for iPad screening */
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I have a problem with a small mobile image gallery. When I change the orientation to portrait the images are too large to be displayed on the screen.
Is it possible with some javascript to make images fit the screen when the orientation changes to portrait? In landscape mode, everything looks fine.
yes, you can use CSS3 Media Queries without using JavaScript.
#media screen and (max-width: 450px) {
img {
width: 30%;
}
}
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Try this:
#media screen and (orientation:portrait) {
//your css code goes here
}
#media screen and (orientation:landscape) {
//your css code goes here
}