I'm trying to use these six media queries in my project:
#media screen and (min-width:320px) {} //for small mobiles and large mobile in portrait
#media screen and (min-width:480px) {} //larg mobiles and mobiles in landscape
#media screen and (min-width:600px) {} //for small tablets
#media screen and (min-width:768px) {} //for normal tablets
#media screen and (min-width:1024px) {} //for normal tablets, laptop, desktop
#media screen and (min-width:1281px) {} //large laptop, desktop
But something strange happens, only my first media query is working fine; the others don't work, and the others work combined. For example, in my #media screen and (min-width:1281px) media query, the result I have is the header and footer of this media query and the body of my media query (min-width:480px).
Does somebody out there know why this is happening?
Related
I'm a beginner in front-end web development. I want to know the order of priority when writing CSS media queries in desktop first approach. Do i write mobile queries first and tablet queries below it, in this manner:
/*Desktop CSS*/
/*Media query for tablet*/
/*Media query for Mobile*/
or the other way around.
You can write anywhere but if you are a beginner then I suggest you create a separate file for responsive CSS so that you will not confused.
SO in the style.css desktop approach and in responsive.css all media queries for mobile and tablet.
Standered Media queries:
#media screen and (min-width: 1200px){} /* Desktop */
#media screen and (min-width: 1025px) and (max-width: 1199px){} /* small laptop */
#media screen and (min-width: 768px) and (max-width: 1024px){} /* tablet */
#media screen and (min-width: 575px) and (max-width: 767.98px){} /* tablet and large mobiles */
#media screen and (min-width: 320px) and (max-width: 480px){} /* Mobile*/
Thanks
I have file .psd with sizes 1920X1080.
I need to make responsive website that will look good for small and big screens.
I have made from this psd html with pixel perfect technic.
I just don't understand how to make from it design for smaller screens.
Please advise.
Using CCS3 media queries! Example for Desktop first:
// Your code for Desktop devices
#media only screen and (max-width: 768px) {
// Here your code for mobile
}
or for Mobile First
// Your code for Mobile devices
#media only screen and (min-width: 768px) {
// Here your code for tablet
}
#media only screen and (min-width: 992px) {
// Here your code for Small Desktop
}
Different rules:
#media screen and (max-width: 992px) and (max-height: 700px) {
// Code
}
or:
#media screen and (max-width: 992px) and (min-height: 400px) {
// Code
}
These are only some example. You must study media queries.
This is my bootstrap website: http://www.feather.com.lk/index.php
My main issue is in iPad portrait view. The elements are not resizing as intended. However, further investigation into the issue showed that I only have this issue when the browser size is scaled down to 768px and 769px. I'm not sure how to solve this issue.
The media queries I used:
#media screen and (min-width: 0px) and (max-width:769px)
#media screen and (min-width: 770px) and (max-width: 992px)
#media screen and (min-width: 993px) and (max-width: 1199px)
#media screen and (min-width: 1200px)
It seems like there is a mismatch between your media queries and the ones provided by Bootstrap.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
(Bootstrap Media Queries)
As you can see here, the smallest Bootstrap media query takes a maximum width of 767px (notice that the next one starts from 768px). However, the smallest media query that you have used takes the width of up to 769px. That must be the reason why there are two pixels, where the website doesn't look as intended.
Try changing your media queries to be the same as the ones in Bootstrap.
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
my layout works fine in big monitors....
but i am trying to display properly in small screen laptops....
which width should i need to use it in the css media queries for the 13 inch monitor...
i am confused abt width for 13 inch laptop
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (min-width: 1200px) {
#media (min-width: 768px) and (max-width: 979px) {
#media (max-width: 767px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
Most 13" monitors are going to be larger than 960px or even larger than 1140px wide. 960px wide is kind of an old standard, more often now 1140px is used, especially for responsive design.
That said, only a netbook with a 8" or 9" screen will have issues displaying. Every 13" monitor I know of should not have any issues displaying your web page. If you want to design for the netbook, they are similar in resolution to most tablets in portrait position. So if you are doing media queries for tablet and mobile phone, then the netbooks should adopt the styles of the tablet, as their resolutions are 800x600 up to 1024x768.
In general, there is no reason to make a different set of styles for anything other than mobile phone and tablet.
Here you can fund all resolutions and their screen sizes:
http://www.codeply.com/responsive-design-cheatsheet.html
For the question you asked:
13' Macbook Air 1440 px x 900px 13 inches
For more testings and research, You can also check this website that tests all required screen resolutions as well provide option to enter custom screen sizes:
http://www.infobyip.com/testwebsiteresolution.php
PS: None of the websites I mentioned above are connected to me, I am just a regular user and a web developer.