I followed these steps to make bootstrap not responsive on desktop but responsive on mobile
http://getbootstrap.com/getting-started/#disable-responsive
But it is also not-responsive on mobile. How can I make it responsive on mobile?
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
In my custom css
#media(max-width:480px) {
.container {
width: 480px !important;
}
}
.container { width: 970px !important; }
HTML
<div class="row topBlock" id="topBlock">
<div class="col-xs-5 text-center">
<div class="marketing" id="download">
<div class="col-xs-12" class="download-badges1">
</div>
</div>
</div>
<div class="col-xs-7 text-center">
</div>
</div>
.container { width: 970px !important; } is overriding your media query. Reverse the selectors and set the width to auto; in the media query so .container does not have a fixed width and will expand to fill the viewport.
.container { width: 970px; }
#media( max-width: 480px ) {
.container { width: auto; }
}
Or better yet, usa a mobile first approach and only define a width when the viewport has scaled beyond on certain width.
#media( min-width: 481px ) {
.container { width: 970px; }
}
div {
height: 200px;
margin: 0 auto;
background-color: rebeccapurple;
}
#media ( min-width: 360px ) {
div {
width: 200px;
background-color: gold;
}
}
<div></div>
It's easy to think that wrapping a selector in a media query would give it a higher specificity, but it doesn't.
#media ( min-width: 360px ) {
.abc { color: red; }
}
.abc { color: blue; }
Amounts to:
.abc { color: red; }
.abc { color: blue; }
Where .abc is going to be blue because the specificity of .abc remains the same, regardless of it being in media query. So the latter rule wins out.
Related
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
No matter how I try in my CSS file, the container can't take full width in phone device.
my CSS file:
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100%;
}
.col-sm-10 {
width: 100%;
}
}
HTML:
<div class="container">
<h1 >Profile</h1>
</div>
Any suggestion?
You should use container-fluid class instead of container, or if would prefer you can use the sm, lg and so on suffixes , like container-sm
See the docs
Try container fluid
<div class="container-fluid">
<h1 >Profile</h1>
</div>
or add !important to #media like this
#media (max-device-width: 1024px) {
.col-sm-2{
width: 100%;
}
.container {
margin: 0 auto;
width: 100% !important;
padding: 0 !important;
}
.col-sm-10 {
width: 100% !important;
}
}
Using Bootstrap, I have a row and 3 column divs in my html and I have the css set to give the columns a height of 100%.
HTML:
<div class="row">
<div id="one" class="col-sm-4">one</div>
<div id="two" class="col-sm-4">two</div>
<div id= "three" class="col-sm-4">three</div>
</div>
CSS:
html,body,{
height:100%;
}
.col-sm-4{
border: 1px solid black;
height: 100%;
}
#one{
background-color: red;
}
#two{
background-color: blue;
}
#three{
background-color: green;
}
When the screen get small enough and the columns stack, I want to essentially change the height of the columns from 100% to 33.3333% so they don't exceed the height of the body. Then when the screen gets big and the columns unstack I want to change their height back to 100%. How do I do this?
Use a media query specifically for Bootstrap's xs breakpoint of <768px..
html, body, .container-fluid, .row {
height:100%;
}
.col-sm-4 {
border: 1px solid black;
min-height: 100vh;
}
#one{
background-color: red;
}
#two{
background-color: blue;
}
#three{
background-color: green;
}
#media (max-width: 767px) {
.col-sm-4 {
min-height: 33.3333333%;
height: 33.3333333%;
}
}
http://www.bootply.com/uXe60OvI4I
Also, remember the .row should always be used inside a container.
Add a new class called .whatever (I used .mydivs) in your css. You don't want to be attaching media queries to bootstrap defined selectors. Add the height values to the ".mydivs" class instead.
If you attach values to a bootstrap class if you use it again later on your page it will also be changing anywhere else you end up using it.
1.) Add
<div class="row">
<div id="one" class="mydivs col-sm-4 col-xs-12">one</div>
<div id="two" class="mydivs col-sm-4 col-xs-12">two</div>
<div id="three" class="mydivs col-sm-4 col-xs-12">three</div>
</div>
2.) Then Use Breakpoints
#media (max-width: 543px) {
.mydivs {
height: 33.3%;
}
}
#media (min-width: 544px) {
.mydivs{ height: 100%; }
}
Sounds like you want to use a media query.
#media(max-width: 500px) {
.col-sm-4 {
height: 33px;
}
}
This will change the height of .col-sm-4 whenever the viewport width is < 500px;
html,
body,
{
height: 100%;
}
.col-sm-4 {
border: 1px solid black;
height: 100px;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
#media(max-width: 500px) {
.col-sm-4 {
height: 33px;
}
}
<div class="row">
<div id="one" class="col-sm-4">one</div>
<div id="two" class="col-sm-4">two</div>
<div id="three" class="col-sm-4">three</div>
</div>
(note that this is really hard to see here because this website has a fixed min width)
Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.
I have a simple setup like this :
<div id="div0">
<div id="div1">Content</div>
<div id="div2">Content</div>
</div>
The two middle divs(1,2) have width:100% and max-width:390px plus floatLeft. When resizing the browser div2 will jump a row down and when getting less then width 390 thay will both start to resize.
What I need is to resize to a min-width first and then jump down to the second line.
How do I do that?
Edit1 : example : http://jsfiddle.net/dwDZx/
Here's a responsive example of what you're asking about. I changed some widths to make it easier to follow the example and see where the numbers come from. http://jsfiddle.net/dwDZx/4/
I change background colors in the different responsive layouts to show you which section is active at which point in resizing the browser.
The only change I made to the markup was to create a "content" div inside div1 and div2. This allowed me to set a border. If I set width of div1 and div2 to 50% AND set a border, then the total width would be 50%+2px (1px left + 1px right) which would cause the floats to wrap. By putting the border on the content div, it puts the borders inside the 50% instead of outside.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#div1, #div2
{
float:left;
}
#media (min-width: 801px)
{
#div1, #div2
{
width: 400px;
background: green;
}
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
width: 49.9%;
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
}
}
EDIT: I thought about it and simplified things a bit. See http://jsfiddle.net/dwDZx/5/ The CSS changes as follows: set a max-width on the parent div to be the max width of div1+div2. Then you only need one media state: for when it's < 400px and should be on one line.
CSS:
* { margin: 0; padding: 0; }
.content { border: 1px solid black; }
#container { max-width: 800px; }
#div1, #div2
{
float:left;
width: 50%;
background: green;
}
#media (min-width: 400px) and (max-width: 800px)
{
#div1, #div2
{
background: red;
}
}
#media (max-width: 399px)
{
#div1, #div2
{
float: none;
width: 100%;
background: blue;
}
}