I'm new to Angular Flex-layout API, and I have a basic question :
Bootstrap 4's .container class is as follows :
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
#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;
}
}
How can I achieve the same behavior with pure Angular Flex-Layout API and without using any CSS ?
You can't do exactly the same using the standard breakpoints from flex-layout because they are different ones. See https://github.com/angular/flex-layout/wiki/Responsive-API.
However, you can use responsive API with modifiers to specify different max width of container. Something like:
<div class="content"
fxFlex.gt-xs="500px"
fxFlex.gt-sm="800px"
fxFlex.gt-md="1000px"
fxFlex.gt-lg="1140px">
</div>
You can also implement your own breakpoints as you needed.
Having said all this I still like to define this "static not component dynamic" sizes in my css.
Related
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.
Our company website was built with WordPress + Forest theme.
To get a full width blog, we had to remove the sidebar from the relevant templates and add the following custom CSS:
blog .site-content, .single .site-content { width: 70%; max-width: 70%; margin: auto; }
This works fine on desktop and most of other devices and screen sizes.
However, the display is not very nice on smartphones, because of too big margins on both sides.
So, we tried to implement the following custom CSS to fix that, but it did not seem to alter the display on smartphones:
#media (min-width: 992px) .blog .site-content, .single .site-content { width: 90%; max-width: 90%; margin: auto; }
Any idea of what is wrong here and how to fix it?
Thanks.
If you wanted smaller margins on smaller displays, it should have been
#media (max-width: 992px) {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
Your #media code is missing some curly braces ({ and }), and you need to use max-width, not min-width. I typically add #media handheld to my mobile CSS as well.
#media (max-width: 992px),
#media handheld {
.blog .site-content, .single .site-content {
width: 90%; max-width: 90%; margin: auto;
}
}
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)
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.