I'm using the following CSS to reorder two divs:
#flex { display: flex; flex-direction: column; }
.ld-login-modal-login { order: 2; }
.ld-login-modal-register { order: 1; }
(Source: How can I reorder my divs using only CSS?)
I'm not using it within any kind of media query.
It works great, but only on some screens. I'm using Safari in Responsive Design Mode to test, and for example:
iPhone SE (320x568) - the divs are not reordered
iPhone 8 vertical (375x667) - the divs ARE reordered
iPhone 8 horiztonal (736x414) - the divs are not reordered
Using my actual iPhone 11 - the divs are not reordered
I've tried adding this the site header, to no avail:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Since there's no media query involved, I'm at a loss as to why it applies to some screen sizes and not others.
I've tried encasing the CSS in various media queries with no effect.
Related
I have the following code on this site (it's Github Pages so you can see the repo here):
#media only screen and (max-width: 600px) {
img {width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
a.box {
width: 100%;
padding:14px 15px;
font-size: 0.75em;
}
}
On my mobile (iPhone 7 Plus), the screen width doesn't appear to be triggering:
Nor does it on Firefox's Responsive Design mode for iphone 7/8/9 Plus:
But If I make the firefox window one pizel bigger:
It suddenly works!
Additionaly - if I set my responsive browser window to exactly the same sizes as the iphone 6/7/8 - then it works fine. Which suggests that it's NOT the size - it's something about the iphone user-agent-string? Maybe?
What is going on and how to do I fix it?
You need to add a meta tag in the head, for the browser to handle viewport zooming correctly:
<meta content="width=device-width, initial-scale=1" name="viewport">
Without the meta tag, the page is rendered at a higher screen width and then shrunk down to fit the device width. Hence the media queries will never be triggered.
More information on this can be found here.
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
in <head> tag of site
and it is better set standard max-width:768px instead of 600px for media-query
Well, maybe the title of this question make no (or, little) sense. Here is details to my question:
If I am not wrong, in Twitter Bootstrap, -sm- means it is the breakpoint with min-width: 576px and max-width: 767.98px. For instance,
#media (min-width: 576px) {
/* ... */
.navbar-expand-sm>.container,
.navbar-expand-sm>.container-fluid,
.navbar-expand-sm>.container-sm,
.navbar-expand-sm>.container-md,
.navbar-expand-sm>.container-lg,
.navbar-expand-sm>.container-xl {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
But some codes in Twitter Bootstrap's bootstrap.css file I've noticed like this:
#media (max-width: 575.98px) {
.navbar-expand-sm>.container,
.navbar-expand-sm>.container-fluid,
.navbar-expand-sm>.container-sm,
.navbar-expand-sm>.container-md,
.navbar-expand-sm>.container-lg,
.navbar-expand-sm>.container-xl {
padding-right: 0;
padding-left: 0;
}
}
and it seems that we're using .navbar-expand-sm for the devices with viewport size less than minimum width required for sm. (it is not only for the case of sm)
I don't understand this mythology. Can you give e precious idea about this? what is exactly area of sm in Twitter Bootstrap?
This part is only for the bootstrap Grid Sizing System.
They are considered <576px for Extra small devices, such as mobile phones.
sm is for small devices such as tablets, and the size starts at ≥576px up to <768px. So Base on the fact that we have 5 sections of sizes in bootstrap, the other part will continue to grow up to 1200px for extra-large desktops.
Navbars have different sizing system which only have 4 sections, we don't have extra small for navbars so the last part is sm section. which is consider below 576.
I have this very simple CSS layout, which will restrict the body width and center it on the screen:
body { max-width: 38em; margin: auto; }
I expected this to be perfectly responsive: On huge screens the lines will stay short and the body centered, on small screens the body will take hold of all of the screen it can get. This works in my web browser's "Responsive Design View". But on mobile devices, the page is displayed as if it was a huge screen: Tiny text, big margins on the side. How can I tell mobile browsers to stop behaving this stupid?
You need to specify the viewport width when working with mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1">
Read More: MDN
I am developing a mobile version of my website but I'm encountering some strange behaviour when rotating my device (iPhone). It looks and works fine when rotated to landscape orientation, but when rotated back to portrait, although the content adjusts, the viewport stays stuck at the landscape size. I have two login input fields that are set to 100% width on the page so that they are able to stretch to fit width on rotation:
input {
clear: both;
box-sizing: border-box;
width: 100%;
padding: 18px 10px;
}
These input elements seem to be part of the problem because when I change them to auto, the rotation behaves properly. Does anyone know how I can fix this behaviour, as well as keeping the form fields' fluid width intact?
FYI, The viewport is set as follows to allow for a fixed, scaled design:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have thoroughly looked on StackOverflow for a solution but none of the solutions in other posts work, whether it be changing the meta viewport attributes, using javascript or changing the media queries in CSS. Any help would be much appreciated.
Contain the inputs within a parent div and create a CSS rule of overflow: hidden; for the parent div.
See the fiddle I created below (on iPhone of course) and let me know if it works!
http://jsfiddle.net/g54pm/3/
I have a web page developed for an iPad for which I used different CSS files for different orientations:
<link REL="stylesheet" href="portrait_style.css" media="all and (orientation:portrait)"/>
<link REL="stylesheet" href="landscape_style.css" media="all and (orientation:landscape)"/>
When I start from landscape mode and then move to the portrait, I have to add 125px to all absolutely positioned elements. And when I start from portrait it is started from 0.
When I move from portrait to landscape and back, it again needs the offset.
There is a demo of this available here
I suspect the problem is that there some landscape element that is not changed in portrait mode.
In chrome on my PC this is not happening.
Try setting the fixed position again with media queries:
/* portrait */
#media screen and (orientation:portrait) {
.[your-selector]{
position:fixed;
}
}
/* landscape */
#media screen and (orientation:landscape) {
.[your-selector]{
position:fixed;
}
}
It looks like when you set the property again it repaints it.
This is caused by an element that pushes the boundaries of the browser viewport, either with a width over 100% or a left set to a negative value.
A fix I have found is to set the overflow of the body to make the viewport behave:
body {
position: relative;
width: 100%;
overflow: hidden;
}
Setting the position of the body will encapsulate all elements (whether absolute or relative) into the body and clip them at the edge of the body.
You might need to add this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
in your <head> section.
More info: Determining iPhone orientation using CSS