How do I make columns wrap EVEN at 1024px? Because, (# 1024px) the page IS responsive, but the "stretchiness" is ugly.
At a basic level, you can mimic the Bootstrap method:
//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------
#media (max-width: 767px) {
// GRID & CONTAINERS
// -----------------
// Remove width from containers
.container {
width: auto;
}
// Fluid rows
.row-fluid {
width: 100%;
}
// Make all grid-sized elements block level again
[class*="span"], .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
.box-sizing(border-box);
}
.span12,
.row-fluid .span12 {
width: 100%;
.box-sizing(border-box);
}
}
Which of course is LESS CSS. This is the compiled LESS:
[class*="span"], .row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: none;
margin-left: 0;
width: 100%;
}
And here is a small snippet that begins the task of replicating this:
#media all and (min-width: 1000px) {
[class*="span"], .row-fluid [class*="span"] {
width: 100%;
}
}
http://jsfiddle.net/userdude/ZJJFJ/1/
There's also a responsive CSS file for greater than 1200px, which may also be helpful. If you do this with LESS, I'm sure it will be simpler as well, instead of pure CSS.
Related
This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Closed last year.
In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section.
The media query make the job for the nav bar but not for the margin-left.
https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000
What’s wrong. ?
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
You simply have to put the media-query at the end of the CSS.
You default styling for #main-doc comes after the media-query, so overrides it.
It should look like this:
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
position: static;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
As you define the #main-doc {margin-left: 290px;} after the #media query it overwrites the media. if you open your browser developer console you can see the #media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before #media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
OR
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px !important;
}
}
#main-doc {
margin-left: 290px;
}
So I am at the beginning, doing different tutorials and challenging myself with conquering the fundamentals. I know this might seem lowkey for most people but be gentle, i'm sorta new to this.
I tried using Media Queries 4 for example #media (30em <= width <= 50em ) { ... } but it jsut doesn't work for me (browser compatibility is checked btw) so I went with a classic code writing (which you may see below). Unfortunately my divs will not scale properly, I am clearly missing something like a parent-child not sharing the proper settings but I can't see it. Could you point out my mistake please? All it needs to do is scale the divs if the width is lower than 600, between 601 and 960 and above 961 (obv .px)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
#media only screen and (max-width: 600px) {
body {
background-color: #F09A9D;
}
}
/* Tablet Styles */
#media only screen and (min-width: 601px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
The html is just a bunch of divs with an img src inside them. The output is the same no matter what the size of the browser window is.
#sbrrk is right. And also, you should write your media queries at the very bottom, so they will override other rules of the same specificity
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I'm using Bootstrap 4 with the container at default width on my desktop screen.
I want the main content section of my app to be max 940px container on big screen.
Do I simply override the bootstrap container class, or create new class container-2? or something else?
Edit
according to the bootstrap.css you could build your own container class. These are the classes you have to 'rebuild':
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 576px) {
.container {
max-width: 540px;
}
}
#media (min-width: 768px) {
.container {
max-width: 720px;
}
}
#media (min-width: 992px) {
.container {
max-width: 960px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container {
min-width: 992px !important;
}
You should never override original bootsrap-classes.
To ensure that everything works well you could do something like this:
#media (min-width: 992px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
#media (min-width: 1200px) {
.container.max-width-940 {
max-width: 940px !important;
}
}
.container.max-width-940 {
min-width: 940px !important;
}
and use it like: <div class="container max-width-940"></div>
Since the Bootstrap container is responsive and uses media queries to set the max-width.
The container alone is only used to define width, auto margins and padding. Other grid class (ie row, col) are not dependent on it, so it would be easiest to define your own custom container.
To define your own container-940...
.container-940 {
width: 100%;
max-width: 940px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
Or, if you want to use the existing .container the overrides would be...
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
Demo: https://www.codeply.com/go/QOAjmGLp7K
If you want to change the max-width to be smaller on smaller widths than you'd adjust the media queries as desired:
#media (min-width: 576px) {
.container {
max-width: ??px;
}
}
#media (min-width: 768px) {
.container {
max-width: ??px;
}
}
#media (min-width: 992px) {
.container {
max-width: 940px;
}
}
#media (min-width: 1200px) {
.container {
max-width: 940px;
}
}
change css in bootstrap file
click on above link and replace that pointed 2 value with 940px in bootstrap.min.css file.
Maybe something very obvious but it depends which reference is first in your code: bootstrap CSS or your personal CSS file. All things equal the last reference wins.
I'm new to working with Bootstrap 3 . I made a container 12 columns with width: 960px;. Then I noticed the container size changed to width: 1110px. Can anyone tell me what the issue is? I just want a fixed container with width of 960px;
Please check it here
I found the css :
.col-lg-12 {
margin-left: 0;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
modify this CSS properties from bootstrap.css
.container {
margin-right: auto;
margin-left: auto;
padding-left: 6px;
padding-right: 6px; }
.container:before, .container:after {
content: " ";
display: table; }
.container:after {
clear: both; }
#media (min-width: 768px) {
.container {
width: 732px; } }
#media (min-width: 992px) {
.container {
width: 952px; } }
#media (min-width: 1200px) {
.container {
width: 1152px; } }
Remove
#media (min-width: 1200px) {
.container {
width: 1152px; }
Update
#media (min-width: 990px) {
.container {
width: 950px; } }
Please comment below if anything wrong while apply this code
Worth noting: if you are using less or sass with Bootstrap, changing the size of the containers is as easy as changing one variable. In Bootstrap 3 (3.3.5 to be precise) their container settings in the variables.less file look like this:
//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.
// Small screen / tablet
#container-tablet: (720px + #grid-gutter-width);
//** For `#screen-sm-min` and up.
#container-sm: #container-tablet;
// Medium screen / desktop
#container-desktop: (940px + #grid-gutter-width);
//** For `#screen-md-min` and up.
#container-md: #container-desktop;
// Large screen / wide desktop
#container-large-desktop: (1140px + #grid-gutter-width);
//** For `#screen-lg-min` and up.
#container-lg: #container-large-desktop;
(see bootstrap's github repo)
So to adapt the size of .container for large screens, simply overwrite the variable #container-large-desktop by adding it to your own variables.less-file:
#container-large-desktop: ((930px + #grid-gutter-width));
(#grid-gutter-witdh is set to 30px on default, so the above will lead to having a 960px container)