I'm trying to make a media query to fix the body on 1440px only for large monitor screens, and to do this, I have this code:
#media (min-width:1440px) {
body {
max-width:1440px
}
}
This media query works fine, but I need to limit it only for a specific size of screen, like 23 inches, for example. I don't want to lose width on laptop screens.
I tried to make this using max-resolution but nothing seems to work.
So, can I create a media query that apply only with specific physical size of screen?
Thanks!
Interesting requirement! You could try to work with "resolution" inside the media query.
If you take your suggested 23 inches and the width of 1440 px you get around 62 dpi (dots per inch).
If you have higher dpi but still the min-width of 1440px, you should be on a smaller screen then 23 inches.
Try it out, I would be curios, if it works like expected.
#media (min-width:1440px) and (max-resolution: 62dpi) {
body {
max-width:1440px
}
}
Related
I'm building a responsive website. There's a separate set of CSS to apply for smartphones. To do this, I use the following code
#media all and (min-width: 760px) {
.wrap {
/*css for large screens goes here*/
}
}
#media not all and (min-width: 760px) {
.wrap {
/*css for small screens goes here*/
}
}
My smartphone has a "Screen Resolution: 1080 x 1920." but it still displays the CSS for small screens. I'm surprised this is happening because 1080 > 760 so shouldn't the first block apply? Is screen resolution not actually measured in pixels? If not, then how does one find how many pixels in a screen?
I just found 760px from an example, is there a better way to decide when to switch from full size web page to compact for small screens?
There are two different concepts: the physical pixels of the screen, and the CSS pixels.
Initially, they were in most cases the same, but with so-called “retina” or “hidpi” screens, they are no longer the same. The idea is that a CSS pixel should retain about the same size, and be independent from the actual number of pixels on the screen: you don’t want to have text with CSS font-size 12px to have different sizes on screens with the same dimensions because their pixel density changes.
So the 1080 pixel width of your phone is probably mapped to 360 CSS pixels (x3 pixel ratio).
Instead of this
#media not all and (min-width: 760px) {
use this
#media all and (max-width: 759px) {
to address all viewports below 760 width.
ADDITION, answering the question in the comment "I'm asking what does px mean since it doesn't seem to be the physical pixel count on the screen":
It used to be the pixel count on the screen before retina and similar displays were introduced, which had a multiple amount of device pixels (AKA device pixel ratio, between 1.5 to 3 time as much).
Still, when those came up, the size reference for one "CSS pixel" remained the same (i.e. one CSS pixel would be 2 device pixels on a device with a device pixel ratio of 2), otherwise all websites would be displayed at half the size on these devices. So the pixel unit used in CSS refers to "CSS pixels" not to "device pixels" unless otherwise stated (which is only possible in media queries).
Go to development tools of your browser and select body tag and after that, you will find width and height by this:
due to some CSS issue this may not work properly will be great if you create a simple HTML with the following data to get width and height:
Change your media query with this.
#media only screen and (min-width: 760px) {
// for screens above 760px
.wrap {
color: blue;
}
}
#media only screen and (max-width: 760px) {
// for screens below 760px
.wrap {
color: lightblue;
}
}
If you want to change designing based on screen size then apply only screen with your media query.
Ask for more queries.
Thanks.
I am trying to align a bottom bar that is in homepage footer of my website. I want to adjust it so it will look good on common screen resolutions.
I have an issue with these resolutions 1280x960 and 1280x1024
#media only screen and (max-width:1280px) and (max-height:960px){
.tp-caption.black, .black {
margin-top: 496px!important;
}
And then use this code after that
#media only screen and (max-width:1280px) and (min-height:961px){
.tp-caption.black, .black {
margin-top: 464px!important;
}
The issue is it uses the same css, for both resolutions. 1280x960 media query
also applied in 1280x1024 resolution.
It displays the 2nd media query css code in browser, but ignores it and take
the above query.
I want to set the margin for both resolutions, for both heights 960 & 1024.
Can someone please explain me how to fix this?
Tried the same in fiddle, this works fine.
jsfiddle.net/5wx9qqyq/3/
One possible cause can be, missing closing braces for
#media only screen and (max-width:1280px) and (max-height:960px){ }
Please verify.
I have a wordpress website and I have content on the main page of my site.
When I open my website on a larger screen it does not look as good, and 17 inches is the largest screen size that makes my content look acceptable.
I want to display different content for screen sizes like 19, 20, 21, 22,etc inches.
My website is : https://hughesjobs.net
How can I achieve this ?
Thanks in advance
You can use CSS Media Queries to add specific styling for elements at those specific screen sizes. However, I would recommend using something other than inches as your measurement. From MDN:
For low-dpi devices, the unit px represents the physical reference
pixel and the others are defined relative to it. Thus, 1in is defined
as 96px which equals 72pt. The consequence of this definition is that
on such devices, length described in inches (in), centimeters (cm),
millimeters (mm) doesn't necessary match the length of the physical
unit with the same name.
For high-dpi devices, inches (in), centimeters (cm), millimeters (mm)
are defined as their physical counterparts. Therefore the px unit is
defined relative to them (1/96 of 1 inch).
Furthermore:
The unit in doesn't represent a physical inch on screen, but
represents 96px. That means that whatever is the real screen pixel
density, it is assumed to be 96dpi. On devices with a greater pixel
density, 1in will be smaller than 1 physical inch. Similarly mm, cm,
and pt are not absolute length.
Some specific examples:
1in is always 96px,
3pt is always 4px,
25.4mm is always 96px.
Reference
Update
Here's an example of how to use a media query to target screen sizes greater than 19 inches (reminder: I do not suggest using inches in media queries):
#media all and (min-width: 19in) {
#header {
display: none;
}
}
In the above example, the element with the id 'header' will be hidden when the screen width is above 19 inches (or equivalent).
For more on Media Queries:
MDN: CSS Media Queries
Google: Use CSS media queries for responsiveness
CSS3 Media Queries
You can add media query in your style sheet as bellow example:
#media only screen and (min-width : 1920px) {
#content{
/* Your style */
}
}
So using the following code with template I can set when responsive mode kicks in.
#media all and (max-width: 680px)
However is there a query that if the browser width goes below for ex. 380px responsive, items stop minimizing etc. and stay at what would appear at 380px responsive only. So if someone was minimizing browser or had viewport of 280 they would be viewing what it looks like at 380px responsive but with scroll bars?
Any help would be appreciated.
Thanks.
You could simply set a min-width on the body element.
Example Here
body {
min-width:380px;
}
Bootstrap doesn't offer that level of control but you can simple add the following media query and then impose styles on elements on screen sizes smaller than 380px wide.
#media all and (max-width: 379px) {
// Style elements specifically for screen sizes less than 380px
}
Hello there I have been trying to figure out how to set up a fixed width container for the extra small device size in Bootstrap 3. I know that there is settings out of the box for this size that are auto to be responsive to the smallest devices however, I have been assigned to make a design that has mobile fixed size around 320px wide and centered before it bumps up to the next media query size (#screen-sm-min).
I have tried calling out the container size to change in the media queries but it does not seem to work.
Thank you for any suggestions!
Should work if you create a media query for max width just below #screen-sm-min
#media (max-width: 767px) {
.container {
width: 320px;
}
}