I've made a site (fairly new to html/css) and certain #media queries aren't working.
Idea being to display container1 95% of screen, on a screen less than 500px..
thanks in advance!
See code below:
#container1 {
float: left;
max-width: 45%;
min-height: 320px;
padding:20px;
margin: 1px;
border: solid #ffffff;
}
#container1:hover { border:solid #000000;
}
#container1:hover { background-color: antiquewhite;
}
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
}
}
You have max-width: 45%; set on it in a previous declaration. Change to:
#media screen and (max-width: 500px) {
#container1 {
width: 95%;
max-width: none;
}
}
You have to overwrite the max-width too!
Otherwise
max-width: 45%;
is still active.
Related
I would like to have 2 different margin for the same div depend on mobile and desktop view.
The code below can perform a margin-left: 70px; on desktop.
The problem arises on mobile view, it doesn't reset to margin-left: 0px;
How can I do it ?
Thanks.
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
.content-collapsed {
margin-left: 0px;
}
You're not resetting margin in .content
You need to use media queries
The solution below uses non-mobile approach
body {
margin: 0;
}
.content {
background: red;
margin-left: 70px;
}
#media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0;
}
}
<div class="content">content</div>
The solution below uses mobile approach (recommended, also is the same used by bootstrap 4)
body {
margin: 0;
}
.content {
background: red;
margin-left: 0;
}
#media (min-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 70px;
}
}
<div class="content">content</div>
You can use media queries (MDN).
Example :
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin-left: 0px; /* mobile*/
}
/* screen width higher than 750px */
#media screen and (min-width: 750px) {
div {
margin-left: 70px;
}
}
<div></div>
Use media query. Add:
/* For mobile*/
#media only screen and (max-width: 768px) {
div {
margin-left: 0;
}
}
This is the solution that worked the best for my case:
<style>
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
##media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0px;
min-width: 100%;
}
}
</style>
Thank you. You made my day.
I have a class that is just numbers, so I've used the escaping methods specified by w3 which is working as desired.
However, if I wrap it in a media query, like below, it doesn't work...
#media (min-width: 1000px) {
.\33 47 {
left: -115px;
}
}
Is there a way to use CSS escaping within a media query?
It works just fine. What special character are you trying to escape?
.\26 B {
width: 50px;
height: 50px;
background-color: red;
}
#media (min-width: 500px) {
.\26 B {
background-color: blue;
}
}
<div class="&B"></div>
Number class:
.\31 3 {
width: 50px;
height: 50px;
background-color: #bada55;
}
#media (min-width: 500px) {
.\31 3 {
width: 50px;
height: 50px;
background-color: purple;
}
}
<div class="13"></div>
Note: check the snippet in full screen
I have add css and media queries for width of screens thats ranging from 320 to a max width above 1440 , When i take the webpage using chromes inspect everything shows fine , but when i resize the browser the page layouts breaks apart for the same size , for example if i resize the browser to 992 x 442 as browser resize , the layout breaks , but if i use the same resolution while inspecting in chrome the page layout is prefect.
What is happening over here ? and can i fix this issue?
#media only screen
and (min-device-width: 769px)
and (max-device-width: 991px) {
.fix-feedback{height: 80px;}
.col-f-lt {
width: 14% !important;
height: 80px;
}
.col-f-lt p{line-height: 53px;}
.col-f-rt {
width: 83% !important;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1199px) {
.navbar-nav>li {
display: inline-block;
float: inherit;
}
.navbar-nav {
text-align: center;
float: none;
margin: 6px auto;
}
}
#media (width: 768px){
.col-f-lt{ width: 16%; float: left; background: #13929e; padding: 33px 20px; margin-right: 10px; }
.col-f-rt { margin: 2px 0 0; width: 80%; float: left; padding: 10px 0 15px; }
.sav-btnn{ display: inline-block; width: 100%;}
.sav-btnn a{ display: table; margin: 0 auto; float: inherit !important; margin-bottom: 10px;}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
First off, min-device-width and max-device-width is deprecated, use min-width and max-width.
The problem here is that your first query start at 769px and ends at 991px, then your second start at 768px, even before the first one started, so when the screen is between 769px and 991px both will be applied.
If they are to be applied one after the other, change the seconds min-width to 992px
Based on a comment, change the 3rd to #media only screen and (min-width: 480px) and (max-width: 768px){.
Note, when both min-width/max-width are used like this, it won't matter their position in the CSS, though it is recommended to order them from low to high, to make it easier to follow what happens to who and when.
#media only screen
and (min-width: 769px)
and (max-width: 991px) {
.fix-feedback{height: 80px;}
.col-f-lt {
width: 14% !important;
height: 80px;
}
.col-f-lt p{line-height: 53px;}
.col-f-rt {
width: 83% !important;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
#media only screen
and (min-width: 992px)
and (max-width: 1199px) {
.navbar-nav>li {
display: inline-block;
float: inherit;
}
.navbar-nav {
text-align: center;
float: none;
margin: 6px auto;
}
}
#media only screen
and (min-width: 480px)
and (max-width: 768px){
.col-f-lt{ width: 16%; float: left; background: #13929e; padding: 33px 20px; margin-right: 10px; }
.col-f-rt { margin: 2px 0 0; width: 80%; float: left; padding: 10px 0 15px; }
.sav-btnn{ display: inline-block; width: 100%;}
.sav-btnn a{ display: table; margin: 0 auto; float: inherit !important; margin-bottom: 10px;}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
As a test, I created 4 columns (with corresponding colors) with 25% width each. I floated them so that they will span the entirety of the page side by side.
I wanted to use media queries in order to cause there to only be two columns side by side if the viewport became small enough, and then one per line if the viewport was even smaller. I'm just doing this within one HTML document as I don't really care to create an accompanying CSS document.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media only screen and (max-width: 787px) {
.column1, .column2, .column3, .column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1, .column2, .column3, .column4 {
width: 100%;
}
}
.column1, .column2, .column3, .column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
</style>
</head>
<body>
<div class="column1">
<p>breakfast</p>
</div>
<div class="column2">
<p>lunch</p>
</div>
<div class="column3">
<p>dinner</p>
</div>
<div class="column4">
<p>snack</p>
</div>
</body>
I feel like I am doing something incredibly wrong. Thank you in advance.
media queries should be below your css styles and not above them.
check this fiddle ~ https://jsfiddle.net/g4j4ewpp/
.column1,
.column2,
.column3,
.column4 {
width: 25%;
height: 300px;
}
.column1 {
background-color: red;
float: left;
}
.column2 {
background-color: blue;
float: left;
}
.column3 {
background-color: yellow;
float: right;
}
.column4 {
background-color: black;
float: right;
color: white;
}
#media only screen and (max-width: 787px) {
.column1,
.column2,
.column3,
.column4 {
width: 50%;
}
}
#media only screen and (max-width: 420px) {
.column1,
.column2,
.column3,
.column4 {
width: 100%;
}
}
An explanation for the answer provided by GvM -
The browser parses code top to bottom. You could have two thousand
#media only screen and (min-width: 748px){
.class {
background-color: some-color;
height: some-height;
}
}
statements. As long as they are all for the same height, the last one will take effect and all previous will be ignored.
Also, say you have three queries that set particular attributes you might want if its a medium size, and one extra if it is a large size.
#media only screen and (min-width: 320px) {
/*give a div 40px height and blue text*/
.this-div {
color: blue;
height: 40px;
background-color: lemonchiffon;
}
/*declare a div, but hide it until the screen is big enough*/
.hidden-div {
display: none;
width: 50%;
background-color: orange;
}
}
#media only screen and (min-width: 480px) {
/*style a different div to have blue text and assign it height*/
.that-div {
color: blue;
height: 30%;
background-color: magenta;
}
/*change the first div's font to red, but keep its height the same*/
.this-div {
color: red;
}
#media only screen and (min-width: 748px) {
/*change the first div's font again, and now it takes up the entire screen.*/
.this-div {
color: green;
height: 100%;
}
/*split the second div and a new third div*/
.that-div {
width: 50%;
}
.hidden-div {
display: inline;
}
}
The background colors remained the same through all media queries. But, the heights and widths may have changed depending on which query was most recently accepted - depending on the size of the viewport.
Can any one tell why the <div> width is NOT adjusted to 48% as the screen size changes? Is it because I have used position: relative;?
CSS:
.wrap {
width: 24%;
background: white;
margin: 15px;
padding: 10px;
float: left;
display: inline-block;
overflow: hidden;
position: relative;
}
#media(max-width: 580px){
width: 48%;
}
Seems like you just forgot the .wrap and curly braces in the media query:
#media(max-width: 580px) {
.wrap {
width:48%;
}
}
Also see these examples about how to notate media queries.
Solution to your problem
#media(max-width: 580px){
.wrap{
width:48%;
}
}
https://jsfiddle.net/11opj4nq/
Hi remember about mobile first :) . Good practice is to override code in larger devices.
.wrap {
width: 48%;
background: white;
margin: 5px;
padding: 10px;
float: left;
display: block;
overflow: hidden;
position: relative;
}
#media screen and (min-width: 580px) {
.wrap {
width: 24%;
margin: 15px;
}
}