I have a set of breakpoints that I am trying to work with and am using the following CSS code to change css rules however the rules are only being applied to screens over 1200px wide and not the others.
/* Large Desktop Devices */
#media (min-width: 1200px) {
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media (min-width: 768px) and (max-width: 1023px)
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media (min-width: 480px) and (max-width: 767px)
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media (min-width: 320px) and (max-width: 479px)
.header {
height: 80px;
}
}
If anyone can see why this isn't working, I would love to know!
Thanks
use like this
#media screen and (max-width:1200px)
#media only screen and (max-width:1200px)
ensure you have added viewport metatag in your page
<meta name="viewport" content="width=device-width, initial-scale=1">
also You are missing opening braces on the last 3 statements
/* Large Desktop Devices */
#media (min-width: 1200px) {
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media (min-width: 768px) and (max-width: 1023px){
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media (min-width: 480px) and (max-width: 767px){
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media (min-width: 320px) and (max-width: 479px)
.header {
height: 80px;
}
}
hope it helps.
/* Large Desktop Devices */
#media screen and (min-width: 1200px){
.header {
height: 120px;
}
}
/* Small Desktop Devices and iPad Landscape */
#media screen and (min-width: 1024px) and (max-width: 1199px) {
.header {
height: 120px;
}
}
/* iPad and Tablets Potrait */
#media screen and (min-width: 768px) and (max-width: 1023px) {
.header {
height: 100px;
}
}
/* Large Screen Phones */
#media screen and (min-width: 480px) and (max-width: 767px) {
.header {
height: 90px;
}
}
/* Small Screen Phones */
#media screen and (min-width: 320px) and (max-width: 479px) {
.header {
height: 80px;
}
}
You need to change it to # media all and (max-width: 480px)
Related
My chrome browser recently upgraded to the latest version v104.0.5112.81 and the camunda tasklist slider now overlaps the display of the task form.
However it is fine on firefox.
Here is a workaround , add to : \server\apache-tomcat-9.0.33\webapps\camunda\app\tasklist\styles/user-styles.css :
workaround for third column issue on chrome that excludes firefox
*/
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media only screen and (min-width: 1200px) {
.three-cols-layout-columns .column-right {
z-index: 1;
left: 800px;
margin-left: auto ;
}
}
[cam-tasklist-task] h2 {
margin-top: 15px !important;
}
#media (min-width: 768px) and (max-width: 991px) {
.three-cols-layout-columns .column-right {
z-index: 1;
left: 660px;
margin-left: auto ;
}
}
}
This worked for me (adjusting the middle column):
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media only screen and (min-width: 1200px) {
.three-cols-layout-columns .column-center {
margin-right: -360px;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.three-cols-layout-columns .column-center {
margin-right: -320px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.three-cols-layout-columns .column-center {
margin-right: -300px;
}
}
}
Above is my CSS for my question.
Is my CSS incorrect to display just one class per screen size?
I have been doing a million different variants of this (of course, this is an exaggeration) and I keep ending up with slightly different, but incorrect results.
This time I ended up with all 3 classes showing until the screen hit 480 pixels.
Then only my .desktop class showed.
/*Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: none;
}
.mobile, .tablet {
display: block;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: none;
}
.desktop, .tablet {
display: block;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: none;
}
.mobile, .desktop {
display: block;
}
}
Here is my HTML:
<div class="mobile">
<main>
<h2> </h2>
<p> </p>
</main>
</div>
The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:
/**Desktop Query*/
#media only screen and (min-width: 768px) {
.desktop {
display: block;
}
.mobile, .tablet {
display: none;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
.tablet {
display: block;
}
.mobile, .desktop {
display: none;
}
}
/*Mobile Query*/
#media only screen and (max-width:480px) {
.mobile {
display: block;
}
.desktop, .tablet {
display: none;
}
}
Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.
Hope this helps! :)
I cleaned up your example so you can make more sense out of it. It works fine just by doing this:
/*Desktop Query*/
#media only screen and (min-width: 768px) {
body {
background: black;
}
}
/*Mobile Query*/
#media only screen and (max-width: 480px) {
body {
background-color: tomato;
}
}
/*Tablet Query*/
#media only screen and (min-width: 481px) and (max-width:768px) {
body {
background: pink;
}
}
I'm trying to play with "Fluid Layers" and when resizing the window (manually resizing its width), I want to make: display:none on one of the Divs but it fails to do so (simply doesn't work).
Can you tell me why display:none on line 18 doesn't work?. And in addition, Should I use DIVS when i want to center 3 blocks inside a container? or you have a better idea for me?.
Would be happy to get a better / different ideas of implementing Liquid Layers if you know any. thank you for your help.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body
{
background-color: #FFFFFF;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px)
{
body
{
background-color: #FFFFFF;
}
.col3 { display: none; }
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px)
{
body
{
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px)
{
body
{
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px)
{
body
{
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px)
{
body
{
background-color: lightblue;
}
}
</style>
</head>
<body>
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1" style="width:29%; padding: 0; margin-left: 3%; margin-right:3%; background-color:#FFF333; display: inline- block">Text</div>
<div id="col2" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
<div id="col3" style="width:29%; padding: 0; margin-right:3%; background-color:#FFF333; display: inline-block">Text</div>
</div>
</body>
</html>
You used a class instead of an id as the selector.
Also i moved the common style for all the cols to the stylesheet instead of the inline style as you did.
body {
background-color: #FFFFFF;
}
#col1,
#col2,
#col3 {
width: 29%;
padding: 0;
margin-left: 3%;
margin-right: 3%;
background-color: #FFF333;
display: inline-block;
}
/* Extra small devices (phones, up to 480px) */
#media (max-width: 480px) {
body {
background-color: #FFFFFF;
}
#col3 {
display: none;
}
}
/* Extra small devices (usually phones from 480px to 768px) */
#media (min-width: 481px) and (max-width: 767px) {
body {
background-color: yellow;
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) and (max-width: 991px) {
body {
background-color: #444;
}
}
/* Small devices (tablets / desktop, 768px and up) */
#media (min-width: 992px) and (max-width: 1199px) {
body {
background-color: green;
}
}
/* large desktops and up ----------- */
#media (min-width: 1200px) {
body {
background-color: lightblue;
}
}
<div style="width:100%; margin-left: 0 auto; background-color:#422220; text-align:center; overflow: hidden; padding:10px 0px;">
<div id="col1">Text</div>
<div id="col2">Text</div>
<div id="col3">Text</div>
</div>
I don't know much about media queries, but I want to try making responsive divs.
I set div for some resolutions:
#media screen and (max-width: 768px) {
div#zarada p {
width: 100%;
font-size: 14px;
}
.zaradabox img {
display: none;
}
}
#media screen and (max-width: 1024px) {
div#zarada p {
width: 38%;
font-size: 14px;
}
}
#media screen and (max-width: 1280px) {
div#zarada p {
width: 38%;
}
}
#media screen and (max-width: 1366px) {
div#zarada p {
width: 39%;
}
}
#media screen and (max-width: 1440px) {
div#zarada p {
width: 42%;
}
}
#media screen and (max-width: 1536px) {
div#zarada p {
width: 46%;
}
}
#media screen and (max-width: 1600px) {
div#zarada p {
width: 48%;
}
}
#media screen and (max-width: 1680px) {
div#zarada p {
width: 50%;
}
}
#media screen and (max-width: 1920px) {
div#zarada p {
width: 56%;
}
}
But if display 1024x600px or ANY, always read width:56% (last style line)
What did I miss?
Essentially what your code is saying is "if it's the screen's size, do this until you reach max-width. Since your smallest value is the screen size, your last media query is overriding all of the previous ones.
If you require such specific handling of the divs, specify the min-width in the handling. e.g.
#media only screen and (max-width:768px) {
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
}
#media only screen and (min-width:769px) and (max-width:1024px) {
div#zarada p {width:38%; font-size: 14px;}
}
#media only screen and (min-width:1025px) and (max-width:1280px) {
div#zarada p {width:38% }
}
#media only screen and (min-width:1281px) and (max-width:1366px) {
div#zarada p {width:39% }
}
etc. Good luck and let me know how it works!
You should revert them (higher to lower):
#media screen and (max-width:1920px) {
div#zarada p {width:56% }
}
#media screen and (max-width:1680px) {
div#zarada p {width:50% }
}
#media screen and (max-width:1600px) {
div#zarada p {width:48% }
}
#media screen and (max-width:1536px) {
div#zarada p {width:46% }
}
#media screen and (max-width:1440px) {
div#zarada p {width:42%}
}
#media screen and (max-width:1366px) {
div#zarada p {width:39% }
}
#media screen and (max-width:1280px) {
div#zarada p {width:38% }
}
#media screen and (max-width:1024px) {
div#zarada p {width:38%; font-size: 14px;}
}
#media screen and (max-width:768px) {
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
}
Mobile First - If you do mobile first, you never need a max-width.
/* this code will be in effect unless from 0px width */
div#zarada p {width:100%; font-size: 14px;}
.zaradabox img {display:none;}
#media screen and (min-width:768px) {
/* this code will be in effect from 768px width and up */
div#zarada p {width:38%; font-size: 14px;}
}
#media screen and (min-width:1024px) {
/* this code will be in effect from 1024px width and up */
div#zarada p {width:38%; }
}
#media screen and (min-width:1280px) {
/* this code will be in effect from 1280px width and up */
div#zarada p {width:39%; }
}
#media screen and (min-width:1366px) {
/* this code will be in effect from 1366px width and up */
div#zarada p {width:42%;}
}
#media screen and (min-width:1440px) {
/* this code will be in effect from 1440px width and up */
div#zarada p {width:46%; }
}
#media screen and (min-width:1536px) {
/* this code will be in effect from 1536px width and up */
div#zarada p {width:48%; }
}
#media screen and (min-width:1600px) {
/* this code will be in effect from 1600px width and up */
div#zarada p {width:50%; }
}
#media screen and (min-width:1680px) {
/* this code will be in effect from 1680px width and up */
div#zarada p {width:56%; }
}
Also, You should always end you css lines with a ;. e.g. p {width:50%;}
I'm having an issue with media query. I set the first on at 770px, so that it would re-size without putting the sidebar underneath the main content.
I then set the second media query at 740 (it was at 450, but I changed to 740 for the iPad Mini), thinking this would send the side-bar underneath the main content. (meaning that if held the iPad Mini vertically, it would look the same as it does on iPhone).
This works on my iPhone, but on iPad mini it keeps the 770px settings when viewed vertically (non-landscape mode).
What am I doing wrong? I assumed 740 would be high enough max-width, given that 770 works for landscape mode.
Here is the site: http://www.insidemarketblog.com
and here's the code
HTML:
div class="container">
<div class="columns">
<div class="content">
<div id="post-1" class="post_box grt top" itemtype="http://schema.org/Article" itemscope="">
<div id="comments">
<div class="prev_next"> </div>
</div>
<div class="sidebar" style="height: 560px;">
</div>
CSS:
#media all and (max-width: 740px) {
.container, .landing .container {
width: auto;
/*max-width: 720px;*/
/*max-width: $w_content;*/
max-width: 100%;
}
.header {
border-top: 1px solid $color1;
}
.landing .header {
border-top: 0;
}
.columns > .content {
/*float: left;*/
float: none;
/*width: 445px;*/
width: 100%;
border: 0;
}
.columns > .sidebar {
/*float: right;*/
float: none;
/*width: 275px;*/
width: 100%;
border-top: 3px double $color1;
}
.menu a, .menu_control {
padding: 1em $x_half;
background-color: #C24F43;
}
.header, .columns > .sidebar, .post_box, .prev_next, .comments_intro, .comment, .comment_nav, #commentform, .comment_form_title, .footer {
padding-right: $x_half;
/*padding-left: $x_half;*/
}
.menu .sub-menu, .children .comment {
padding-left: $x_half;
}
.comments_closed, .login_alert {
margin-right: $x_half;
margin-left: $x_half;
}
.comment_form_title {
margin-left: -$x_half;
margin-right: -$x_half;
}
.right, .alignright, img[align="right"], .left, .alignleft, img[align="left"] {
float: none;
}
.grt .right, .grt .left, .post_box .alignright, .post_box .alignleft, .grt blockquote.right, .grt blockquote.left {
margin-right: 0;
margin-left: 0;
}
.post_author:after {
content: '\a';
height: 0;
white-space: pre;
display: block;
}
.grt blockquote.right, .grt blockquote.left, #commentform .input_text, .sidebar .search-form .input_text, .sidebar .thesis_email_form .input_text {
width: 100%;
}
.post_box blockquote {
margin-left: 0;
}
.comment_date {
display: none;
}
}
Try this media query.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}