Initially I had my base CSS and then I added a 640 media query...
#media screen and (max-width:640px) {}
I coded everything to fit mobile devices and everything was fine. A little bit ago I added another media query...
#media screen and (max-width:840px) {}
Now, the mobile part of my site is taking the second media query's code? I don't know a phone that has a max width that large. Why is the 840 media query disturbing my mobile media query?
In order to prevent the override of CSS, use the below code to specify rules only for width between 640px and 840px:
#media screen and (min-width: 640px) and (max-width:840px) {
/* CSS rules for width between 640px and 840px */
}
Alternatively you can reorder the code:
#media screen and (max-width:840px) {}
#media screen and (max-width:640px) {} /* This will override the above CSS rules */
Check out this page: MDN Media Queries to learn some good practices.
The Position (order) of the media queries in the .css file plays an important role, they are in ascending priority order (top to bottom ) in the .css file, you just need to change this order as follows:
Put this #media screen and (max-width:840px) {} media query, above this one #media screen and (max-width:640px) {} and it will fix the issue.
Alternatively you can use the following CSS:
#media screen and (min-width: 640px) and (max-width:840px) {
/* your code here */
}
You can use what manoj said.
This is a guide from CSS tricks - Hope this helps
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-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-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-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 */
}
Related
This question already has answers here:
How to use particular CSS styles based on screen size / device
(6 answers)
Closed 2 years ago.
I am trying to make a webpage and do not know how to make it compatible with different screen resolution like for pc and mobile's at same time.
Is there any official method to do it?
Or should i just have to play around with figures for:
Top: vh; and left: vw; to make it work.
If there is any better alternative then please let me know. Working on all those figures is really difficult.
Bootstrap is the best one to build responsive web page and it is an open source.
https://getbootstrap.com/
Razu's solution is ideal if you like writing your own CSS.
There are also frameworks and libraries which do the calculations for you (Bootstrap, Flexbox and CSS-grid are some good examples).
The downside to using those is that you need a bit of knowledge of CSS to adapt those to your liking.
You can do it by media queries in this formate
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575.98px) { write css here }
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) and (max-width: 767.98px) { write css here }
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) and (max-width: 991.98px) { write css here }
// Large devices (desktops, 992px and up)
#media (min-width: 992px) and (max-width: 1199.98px) { write css here }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { write css here }
You can use media queries for different screens. For example
For mobile screen you can use:
#media screen only(max-width:576px){ //Your css code//}
And For Medium screens:
#media screen only(max-width:768px){ //Your css code//}
You can use the media query to show the same webpage in different resulotion of devices. Here is the media query that you can use:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* STYLES GO HERE */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* STYLES GO HERE */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* STYLES GO HERE */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait & landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* STYLES GO HERE */
}
/* iPhone 5 (landscape)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* STYLES GO HERE */
}
/* iPhone 5 (portrait)----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* STYLES GO HERE */
}
Also follow the below link to know more:
Media query for standard devices.
To which part does my layout answer and how can I change it? I have tried changing the screen size in the Dw Design page but I don't think it's responding.
you need Dreavweaver CC to design for mobile, although its not necessary
just use this guide in your css file and add the css for each device
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
While referring to concept ‘Responsive Web Design’ and using it any ASP.NET project.
I found in Google Developers article as:
A CSS media query we recommend to use for smartphones is:
#media only screen and (max-width: 640px) {...}
Now, iPad is having resolution of 1024x768 and Lumia 920 with resolution of 1280x768 similar to a PC screen resolution. How can I give different views in browser using media tag (i.e. one for PC and one for iPad and one for Lumia 920)?
I don’t want separate mobile URLs. I just want to have all in one just by making use of CSS. How can this be achieved?
There are a lot of ways to this, but if you choose to do it with CSS, you'll have to trust the screen-width to identify the devices, and that can be pretty limited.
Even so, CSS solution is simple, and you can do it this way
CSS solution
According to this answer,
The current best way that I use to detect a mobile device is to know
its width and use the corresponding media query to catch it
Suggesting you do this:
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-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-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-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 */
}
css-source
Javascript solution
The other way to identify the device is using javascript. There is already a related answer telling how that can be accomplished.
Is it feasible to developers specify when the contents of the web page stack by responsive design? So for example if you are in 1200 x 1800 resolution, you are in the following display:
[A] [B]
However, if you are in 1000 x 1800 resolution, your display automatically in the following stack format by the virtue of Twitter Bootstrap's responsive functionality (I use Bootstrap 3):
[A]
[B]
However, is it feasible for developers specify when the responsiveness occurs - for example, when the resolution is less than 1100 x 1800, the above stack occurs - and if it's feasible, how can I specify it?
I use Bootstrap, HTML5, CSS3 as well as node.js, but I think node is irrelevant in this case.
I use Google Chrome, and don't care about how the other browsers react to the change.
Thanks.
One approach may be to have a look at media queries (2), e.g. quoting from Mozilla
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- CSS media query within a style sheet -->
<style>
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-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-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-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 */
}
I hope help you
I am working on a webpage using HTML and CSS. When I have my browser in full screen, everything looks good. However, if I resize my browser, the text shows up on top of the image. I have tried to google about this, but did not get any resolution. Has anyone experienced similar situation, and knows of a solution? Please share your thoughts.
The code is in the link:
http://jsfiddle.net/eJyZs/
Btw, I am using SimpleGrid as well. http://simplegrid.info/
I think you have made mistake in CSS.
It's image Position problem. so, change your style sheet.
for example: position:fixed; top:30px; right:5px;
so, change position fixed to anything you want... for more help look at here.. http://www.w3schools.com/Css/css_positioning.asp
Hi now used to Media Queries for Standard Devices
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-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-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-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 */
}
more info