If Iphone 5 (320x568) is in the portrait mode its width is 320px. When it is in the landscape mode is its width 320px and orientation is landscape, or its width is 568px and the orientation is landscape. I am talking about the width that CSS sees.
In other words, does this code work in landscape mode as well, so the site (wrapped by #container) occupies the whole screen in this case and not just the 320px?
#media (max-width: 568px) and (min-width:320) {
#container {
max-width: 790px;
width: 100%;
}
you want this
Portrait is taller, landscape is wider.
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
http://www.hongkiat.com/blog/css-orientation-styles/
Short answer: For an iphone 5 with those dimensions, your code will always apply.
Explanation: Think of min-width as
The minimum width on which this CSS will apply (anything lower will not count)
likewise consider max-width as
The maximum width on which this CSS will apply (anything higher will not count)
Note that you are applying a width:100% in a range between 320px and 568px. This means that the line max-width: 790px; will never be executed since the highest value width:100% can return is 568px
Related
I have a webpage which has a fixed layout.
It was built using standard size of 1280x800.
Since it doesn't need to be mobile compatible, and not accessed by the public, it was built using fixed size elements.
The problem is, I need it to scale automatically according to browser size.
I managed to do it with the viewport metatag, but that works only for mobile browser (which I do not need...)
e.g. How can the page display correctly, when opened in Chrome on a desktop with 1024x768 resolution, without the need to manually zoom out in the browser?
Thanks!
Replace every px with a vw based on the ratio of the width to the size at 1280x800.
So if you had a div with width: 1280px you would replace it with width: 100vw.
Set your font-size on the body in this way to get the text to scale, and use em or rem to size larger text.
If your font size was 16 at 1280x800, then you would want font-size: 1.25vw.
Use CSS media queries to achieve different styles at different screen widths (responsive). Here is an example of some different media queries.
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
}
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
What I wish to achieve is having 1 left that will occupy a minimum of 300px or if the screen is bigger 25% of it, next to it I wish to put another div that will occupy the rest of the screen with the option to add a third div beside those 2 that will shrink the middle one to get a width of 25% or minimum of 300px;
Here is the sample of the div I have created:
.parents{
width:25%;;
min-width:300px;
height:100%;
background-image:url(img/background_parents.jpg);
border-right:3px solid darkgray;
overflow:auto;
}
Now beside this div I need 1 with adjustable width because of the option of adding a third panel with the same width of the one you see above.
I can do this with jquery, but I wonder if there is an option of achieving this through CSS, because I wish to escape the route of constant calculations of the screen width.
Try using media queries to define your width based on the detected device screen. This is my usual setup:
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.
My HTML fluid site isn't scaling properly on iPhone 4/S/5 and iPad devices. My minimum container div scale is set to 480px. I do not see why it's not scaling properly. Might it be in my meta: initial-scale=1.0?
jsfiddle here: http://jsfiddle.net/CtPpg/2/
Could it be that you are setting a px width for your min-width? Correct me if I am wrong, but it should be a percentage value, to make it truly fluid.
the max-device-width for ipads is 1024 whereas for iphones, its 480px. you may need to use media queries to address both the devices.
ipads : #media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
iphones: #media only screen and (max-device-width: 480px) {
look at this jsfiddle
changes:
max-width: 480px;
/*max-width: 800px; #### set your max width here #### */