I am working on media queries for my site.
I created media queries for 1024 x 768 screen size, and it works well. I created a media query for 1360 x 768 screen size also, but it's not working. Here is what I've got so far:
#media (min-width: 992px) and (max-width: 1199px) {
#loginrow {
padding: 135px 0;
}
}
#media (max-width: 1360px) {
#loginrow {
padding: 135px 0;
}
}
Can anyone suggest how this can be correctly?
Just use min-widths, when you hit the higher resolution your queries will override what came before it.
#media (min-width: 992px) and (max-width: 1199px){ #loginrow{ padding: 135px 0; } }
#media (min-width: 1360px){ #loginrow{ padding: 135px 0; } }
Related
I want to create a website which is responsive on mobile and desktop, but my media queries won't work (it's do nithing).
I put my link below if any body wants html and css.
my CSS:
#media screen and (min-width: 900px){
.container{
width: 30vw;
}
.show-onscreen{
display: block;
}
.hide-onscreen{
display: none;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 300px){
.container{
width: 99vw ;
}
}
and this is full code:
full code
the below query might be the issue:
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
here min-width is greater than max-width, hence it will never execute.
You can try below if that is your goal:
#media screen and (min-width: 700px) and (max-width: 900px){
.container{
width: 50vw ;
}
}
#media screen and (max-width: 700px) and (min-width: 900px){
.container{
width: 50vw ;
}
}
max-width: 700px && min-width: 900px will never be true since width cannot be less than 700 and more that 900 on the same time.
I assume you meant to set the rules to be between 700 to 900
#media screen and (max-width: 900px) and (min-width: 700px){
Switch the width values in the media query
To build and website mobile-first you should develop first for mobile and then other sizes.
You will need to use something like this:
Usage: for mobile (except smallest screens), tablet, laptop, desktop, bigscreen. Anyone over 480px
#media only screen and (min-width: 480px) {
// content
}
Usage: for tablet, laptop, desktop, bigscreen. Anyone over 768px
#media only screen and (min-width: 768px) {
// content
}
Usage: for laptop, desktop and bigscreen. Anyone over 992px
#media only screen and (min-width: 992px) {
// content
}
Usage: for desktop and bigscreen. Anyone over 1200px
#media only screen and (min-width: 1200px) {
// content
}
Usage: just for bigscreen over 1600px
#media only screen and (min-width: 1600px) {
// content
}
To use this code you can develop without set media queries until you need to change some css property for bigger screens.
I suggest you to read this article: A Hands-On Guide to Mobile-First Responsive Design
I have this code and I have tried to figure out why it's not working. I have read several answers to quite similar questions, but I just don't get any wiser. Is the code in let us say (max-width:480) applying to all the other larger media queries? The only thing I can see working is the (max-width:1000)
#media screen and (max-width: 1000px) {
.figur {
display: none;
}
#about {
width: 100%;
}
#map {
width: 100%;
}
}
#media screen and (max-width: 720px) {
.parallax {
background-image: url("../img/bamseLiten.jpeg");
}
.row .column {
width: 100%;
height: 200px;
}
}
#media all and (max-width: 480px) {
#logo {
display: block;
width: 70%;
align-self: center;
}
.menu li {
display: block;
width: 100%;
}
}
For maximum device comparability and adopting you can use bootstrap 4+ like Media Query
// Small devices (landscape phones, 576px and up)
#media (max-width: 575px) {
}
// Medium devices (tablets, 768px and up)
#media (max-width: 767px) {
}
// Large devices (desktops, 992px and up)
#media (max-width: 991px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (max-width: 1199px) {
}
For ultra mobile first you can use min-width instead of max-width which is like this -
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
}
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) {
}
Hope you will get a better responsive layout using one of this media query.. Thanks
How are you testing this?
You need to make sure you are able to change the screen size... chrome offers decent ability to do this with inspect.
You may want to try using a min-width along with the max?
#media only screen and (min-width: 768px) and (max-width: 990px) {
.class {
position: fixed;
top: 0;
height:40px;
}
}
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
I have set some media queries, but some work and some dont. I really dont know what is wrong, because i used the same media query code for another project and that worked as usual. It works from 768px and on but not on smaller screens. I am using bootstrap and angular.
#media only screen and (min-width : 320px) and (max-width : 480px) {
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 481px){
.accordion-ticket {
margin-left: 10px;
}
}
#media (min-width: 768px) {
.accordion-ticket {
margin-left: 10px;
}
}
Am I missing something? Meta tag is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Offhand I'd say you were missing a max-width statement from the middle media query but it's not entirely clear what the issue is.
JSfiddle Demo
.accordion-ticket {
height: 25px;
background: red;
}
#media only screen and (min-width: 320px) and (max-width: 480px) {
.accordion-ticket {
background: blue;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.accordion-ticket {
background: green;
}
}
#media (min-width: 768px) {
.accordion-ticket {
background: orange;
}
}
<div class="accordion-ticket"></div>
Looks like your queries are upside down for a start you should have them from the widest to shortest top to bottom.
I thought this would be a helpful tutorial on how to create a loop in less that create media queries to allow for responsive fonts.
I was unhappy with how my font would never scale while all my DIVs and images would do so. As you scale down. The font appears to get larger making the design and layout look terrible. Of course I could leave it that way and let the text wrap but that also looks terrible.
So I created these media queries to incrementally increases the font size every 20 pix by 0.05. Then that evolved into less logic so that I could use less code. However, I've included both css and less bellow.
With the font changing every 20 pix of resizing can look a little choppy. But that's much better then only having 3 media queries to change font size. That's garbage. And Lazy. Why do it manually? I digress. See the advantage of having a loop is that you can refine and increase the amount of media queries to get more smoothness in font/browser sizing.
One last thing. once you have you fonts set this way; to html. Everything else must be set to percentage font sizes. That way they are a percentage of the html font size and will be responsive. Here's an example:
html{
font-size: 1em;
}
h1{
font-size: 120%; //1.2em
}
h2{
font-size: 110%; //1.1em
}
Please tell me what you think.
-Love PAT
LESS LOOP:
//Set font for 300 pix devices and lower. Font size will increase by 0.05 every 5pix of width.
#fontSize: 0.7em; //em
//#media start at?
#screenWidth: 300px;
#screenWidthMax: 640px;
#loop: (((#screenWidthMax - #screenWidth)/20)-1);
//Size for 640px and above
#fontSizeMath640: round(#fontSize + (#fontSize * (0.05*(#loop+2))),2);
#media (min-width: #screenWidthMax) {
html {
font-size: "#{fontSizeMath640}";
}
}
//Create loop that repeats from 300 pix all the way to 640 pix incrementing by 20px. So, (640-300=340)/20=17. Loop 68 times.
.responsiveFont (#index) when (#index >= 0) {
#minWidth: (#screenWidth+(20*#index));
#maxWidth: (#minWidth + 19);
#fontSizeMath: round(#fontSize + (#fontSize * (0.05*(#index+1))),2);
#media (min-width: #minWidth) and (max-width: #maxWidth) {
html {
font-size: "#{fontSizeMath}";
}
}
// next iteration
.responsiveFont(#index - 1);
}
// end the loop when index is 0
.responsiveFont (0) {}
// "call" the loopingClass the first time with highest value
.responsiveFont (#loop);
//Size for 300px and below
#media (max-width: #screenWidth) {
html {
font-size: "#{fontSize}";
}
}
Which Prints out this:
CSS
#media (min-width: 640px) {
html {
font-size: "1.33em";
}
}
#media (min-width: 620px) and (max-width: 639px) {
html {
font-size: "1.29em";
}
}
#media (min-width: 600px) and (max-width: 619px) {
html {
font-size: "1.26em";
}
}
#media (min-width: 580px) and (max-width: 599px) {
html {
font-size: "1.22em";
}
}
#media (min-width: 560px) and (max-width: 579px) {
html {
font-size: "1.19em";
}
}
#media (min-width: 540px) and (max-width: 559px) {
html {
font-size: "1.15em";
}
}
#media (min-width: 520px) and (max-width: 539px) {
html {
font-size: "1.12em";
}
}
#media (min-width: 500px) and (max-width: 519px) {
html {
font-size: "1.08em";
}
}
#media (min-width: 480px) and (max-width: 499px) {
html {
font-size: "1.05em";
}
}
#media (min-width: 460px) and (max-width: 479px) {
html {
font-size: "1.01em";
}
}
#media (min-width: 440px) and (max-width: 459px) {
html {
font-size: "0.98em";
}
}
#media (min-width: 420px) and (max-width: 439px) {
html {
font-size: "0.94em";
}
}
#media (min-width: 400px) and (max-width: 419px) {
html {
font-size: "0.91em";
}
}
#media (min-width: 380px) and (max-width: 399px) {
html {
font-size: "0.88em";
}
}
#media (min-width: 360px) and (max-width: 379px) {
html {
font-size: "0.84em";
}
}
#media (min-width: 340px) and (max-width: 359px) {
html {
font-size: "0.8em";
}
}
#media (min-width: 320px) and (max-width: 339px) {
html {
font-size: "0.77em";
}
}
#media (min-width: 300px) and (max-width: 319px) {
html {
font-size: "0.73em";
}
}
#media (max-width: 300px) {
html {
font-size: "0.7em";
}
}
For best responsive Media queries we use Bootstrap class where defined these :
/* Small devices ( #screen-sm-min Phones (<768px) ) */
#media (min-width: 368px) {
}
/* Small devices (#screen-sm-min tablets, 768px and up) */
#media (min-width: 768px) {
}
/* Medium devices ( #screen-md-min desktops, 992px and up) */
#media (min-width: 992px) {
}
/* Large devices ( #screen-lg-min large desktops, 1200px and up) */
#media (min-width: 1200px) {
}