I currently have this chunk of codes.
#media screen and (min-width: 768px) and (max-width: 990px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
#media screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
What I'm trying to do is something like..
#media screen and (min-width: 768px) and (max-width: 990px),
#media screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
so I don't have to write the same properties and values again since they are same. Any ideas?
I also searched for "setting more than 2 breakpoints inside a media query" but there's no luck.
You don't have to add #media again in the second line. This should work:
#media screen and (min-width: 768px) and (max-width: 990px),
screen and (max-width: 630px) {
.community-info-box {
width: 100%;
margin-right: 0;
float: none;
... : ...
}
}
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
#media screen and (min-width: 501px) and (max-width: 769px)
The code between this media query is taken even if the size of the window is 1920px !
Look at this code :
.row-contact{
.col-xs-12:first-child {
margin-top: 0;
}
}
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
.col-xs-12:first-child {
margin-top: 12%;
}
}
}
In full screen I have margin-top: 12%, however, it must be margin-top: 0 !
Why this isn't working ?
EDIT
I found the solution !
I closed the media query before writing the SCSS instruction
Thanks for your help ! :D
.row-contact{
.col-xs-12:first-child {
margin-top: 0;
}
}
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
}
.col-xs-12:first-child {
margin-top: 12%;
}
}
Try this way because nesting is not working if you are not using LESS or SCSS
I think you use nested css so that your code not work
#media screen and (min-width: 501px) and (max-width: 769px){
.row-contact {
padding: 0 !important;
}
.col-xs-12:first-child {
margin-top: 12%;
}
}
Try to use above code
Thanks :)
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;
}
}
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..