I would like to customize the width of the class container in bootstrap.
The width I would like to obtain is 670px.
I customized the bootstrap.css file (http://getbootstrap.com/customize/) in order to obtain my own version.
The code below shows how container has been customized.
From 749px the width does not change as expected.
Do you know how to fix it?
#media (min-width: 768px) {
.container {
width: 670px;
background: green;
}
}
#media (min-width: 992px) {
.container {
width: 670px;
}
}
#media (min-width: 1200px) {
.container {
width: 670px;
}
}
Add '!important' after the value, like this code:
#media (min-width: 768px) {
.container {
width: 670px!important;
background: green;
}
}
#media (min-width: 992px) {
.container {
width: 670px!important;
}
}
#media (min-width: 1200px) {
.container {
width: 670px!important;
}
}
Related
I am trying media queries, but they won't work on 768px and 576px. I tried the minimum width but it also does not work.
.changing-color {
background-color: powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px) {
.changing-color {
background-color: chartreuse;
}
}
#media screen and (max-width: 1200px) {
.changing-color {
background-color: blueviolet;
}
}
#media screen and (max-width: 992px) {
.changing-color {
background-color: brown;
}
}
#media screen and (max-width: 768px) {
.changing-color {
background-color: darkorange;
}
}
#media screen and (max-width: 576px) {
.changing-color {
background-color: darkkhaki;
}
}
<div class="changing-color"></div>
Your CSS is correct, it works in this pen. Maybe you are not resizing your screen? Because that is exactly what these media-queries are for.
This snippet below is limited in width, so it will show probably darkorange depending on how you are viewing this page. On mobile it might even show darkkhaki.
.changing-color {
background-color:powderblue;
width: 100vw;
height: 30vh;
font-size: 3vw;
}
#media screen and (max-width: 1400px){
.changing-color {
background-color:chartreuse;
}
}
#media screen and (max-width: 1200px){
.changing-color {
background-color:blueviolet;
}
}
#media screen and (max-width: 992px){
.changing-color {
background-color:brown;
}
}
#media screen and (max-width: 768px){
.changing-color {
background-color:darkorange;
}
}
#media screen and (max-width: 576px){
.changing-color {
background-color:darkkhaki;
}
}
<div class="thing changing-color"></div>
Have you added a viewport meta tag like this ?
<meta name="viewport" content="width=device-width,initial-scale=1">
This is needed because by default, most mobile browsers lie about their viewport width.
Reference Beginner's Guide to Media Queries
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 have bootstrap.min.css, which defines:
#media (min-width: 768px) .modal-dialog {
width: 600px;
margin: 30px auto;
}
#media (min-width: 992px) .modal-lg {
width: 900px;
}
I want width: auto; for "modal-dialog modal-lg" screens between 768 to 992px. So I try in my css:
#media (min-width: 768px) .modal-dialog {
width: auto !important;
}
but this does not applies.
Then, I googled something like this:
#media (min-width: 768px) {
body .modal-dialog {
width: auto !important;
}
}
But this overrides also #media (min-width: 992px). How to override only (min-width: 768px) rule?
This media query should achieve what you asked. You set the minimum AND the maximum width where to apply the desired changes.
#media (min-width: 768px) and (max-width: 992px) {
.modal-dialog {
width: auto;
}
}
!important should not be necessary unless you have to overwrite another !important :)
I have several mediaqueries. It's works perfectly with the width and it's awfull with height... !!?
I put the same code but.. All the width are ok.
#media all and (max-width: 800px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 801px) and (max-width: 920px)
{
.customTips
{
float: left;
position: absolute;
top: 950px;
width: auto;
}
}
#media all and (min-width: 921px) and (max-width: 1320px)
{
.customTips
{
width: 15%;
}
}
The code with height doesnt' works correctly.
#media all and (min-height: 720px) and (max-height: 767px)
{
.customCadreFormulaire
{
height: 405px !important;
}
}
#media all and (min-height: 768px) and (max-height: 899px)
{
.customCadreFormulaire
{
height: 420px !important;
}
}
When I try this code, with a screen 1440/900, the code for media all and (min-height: 720px) and (max-height: 767px) works at place ??
I don't understand why, an idea ? Thanks..
I'm creating a responsive page using CSS Media Queries. I can see in Chrome's developer tools that the media queries are working, however, they are not overriding my default styles. For example, take these styles:
#hero .text {
margin: 150px;
}
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
In my browser, if I resize to 1024px wide, I can see that the all the above styles are being requested BUT the default style (with margin 150px) is what is finally used.
ANy idea what I'm doing wrong?
change this
#media all (max-width: 1024px) and (min-width: 1px) {
#hero .text {
margin: 80px;
}
}
to
#media screen and (max-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and
#media screen and (min-width: 1024px) {
#hero .text {
margin: 80px;
}
}
and this one below,
.text { /*removed #test */
margin: 150px;
}