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/).
Related
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>
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
}
}
in my project i am working on two column layout like col-lg-8 col-lg-4 , or col-lg-6 col-lg-6 but i want when it will open in mobile view it will convert in the slider what is best solution make a separate section for mobile view or any best way for doing this
Please help me
You need to look into using media queries. These will allow you to cater your design to the width and height of your screen.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Media Queries
I was wondering if it is possible to prevent some screens of showing the contents of my site ?
#media only screen and (max-width: 600px) {
body {
/* Hide Content Or Whatever*/
}}
Yes, you can do that via
#media only screen and (max-width: 600px) {
body {
display: none
}}
Note: #media queries aren't supported by IE8 and below
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!