I've come across a super weird problem when it comes to media queries and browser zoom.
I'm using Chrome 52.0.2743.116 m.
The issue is this:
When you zoom in using the browser zoom to 125% and resize the browser until tablet is supposed to kick in (max-width: 1024px), there seems to be a moment where neither max-width: 1024px or min-width: 1025px is true.
If I change it to max-width: 1024.9px - it works.
Here's a quick example:
<div class="box">
Text
</div>
<div class="box">
Text
</div>
<div class="box">
Text
</div>
And the CSS:
#media (max-width:768px) {
.box {
background: blue;
}
}
#media (min-width: 769px) and (max-width: 1024px) {
.box {
background: red;
}
}
#media (min-width:1025px) {
.box {
background: green;
}
}
Example: http://codepen.io/tomusborne/pen/EyrNvG
Zoom in 125%, then resize down until it turns red. Resize up pixel by pixel, and you'll notice there's no background color at all for one pixel between tablet and desktop.
Anyone know what's going on here? Is using 1024.9px a decent solution? Am I just going crazy?
Inspecting the <html> element holds the answer:
So the page width is actually greater than 1024px and less than 1025px.
I suggest using the exact same values for both min-width and max-width.
This covers all widths, without gaps, and if there is a collision (i.e. the page is exactly 1024px wide) then whichever rule appears later in the document should take precedence.
You don't need to use min or max. if you want to apply any css for any fixed width then you can use media query like below...
#media only screen and (width : 1024px) {
/* Your Styles */
}
Related
Running a responsive single-page app, there are box objects with content. These are intended to have background images. However, for hand-held devices, orientation becomes a problem, as the boxes width and height proportions change.
Detecting devices and viewport sizes has not been a task built on uniform procedures. At appears to me that, assuming users have relatively modern browsers, CSS3 and invoking #media screen and (orientation:landscape) is the safest bet.
Assuming that images will be cropped in both a horizontal and a vertical version and a tag with orientation-less coding
<div class="box" style='background: url("https://somewhere.amazonaws.com/general-purpose-images/splash.jpg") no-repeat fixed; background-size: 100% 100%; background-attachment: scroll;'>
How can this be effectively toggled according to orientation?
set a div with a class for the image
<div class="img_a">
Then define the CSS rules for the required images according to orientation or any other media queries you might need to implement
#media screen and (orientation: portrait)
{ div.img_a
{ background: url(https://[...]img_a.jpg) no-repeat fixed; }
[...] }
#media screen and (orientation: landscape)
{ div.img_a
{ background: url(https://[...]img_a_horizontal.jpg) no-repeat fixed; }
[...] }
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
I have HTML
<div class="Box">
<img width=100% src="...">
</div>
<table class="tab1">
...
</table>
I want these two elements to reposition depending on the size of the screen that they are displayed on. On narrow screens such as mobile phones or low-resolution projectors I want the table to appear centered underneath the div. With the div scaled to take up the full width of the parent element. But on wide screens I want the table to appear next to the div, with the two of them taking up the full width of the parent element.
Is it possible to do this in pure CSS?
You need responsive web design. Here's a good article on how to do it: http://alistapart.com/article/responsive-web-design
You can try to use CSS3 #media for that problem.
.Box
{
width: 100%;
}
/* overwrite, if smartphone */
#media screen and (max-width: 480px)
{
.Box, .tab1
{
width: 50%;
}
}
Alternative you can try media type handheld:
#media handheld
{
.Box, .tab1
{
width: 50%;
}
}
found on: http://www.w3schools.com/css/css_mediatypes.asp
I was experimenting with media queries to see the effects.
So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100%.
The code:
#box {
margin: auto;
background: white;
width: 100%;
}
// Media Queries
#media only screen and (min-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So my question is, why does the width of the #box stay as 100% when the window is maximised?
What am I doing wrong?
jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)
try max-width. This context will apply when available screen space is less then 480 pixels. jsFiddled here, black box will be applied when available space width is lesser than 480px
#media only screen and (max-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.
Maybe it's the comment : // Media Queries witch caused an error ?
I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.
So it should be:
#media only screen and (max-width: 480px) {
//code
}
Hence, (max-width: xxx) not, (min-width: xxx).
Example fiddle
I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.