I am using #media screen and (max-width:768px) to change the view of my website on mobile but when I rotate to landscape mode it changes to desktop website meaning it shows content which was hidden using
#media screen and (max-width:768px). How can I avoid this?
What #media screen and (max-width:768px){ ... } does is it will only apply everything in that block if the device the user has has a screen of a width of 768px or lower (taking into consideration double pixel density etc, but that a whole other can of worms)
So when you turn your phone sideways it's height becomes it's width and since that is more than 768px, it does not apply your "mobile layout".
One option would be to increase 768px to a bigger number, or even split some of the rules for smaller and higher widths, like for example having rules for max-width: 640px and for max-width: 960px
Related
how can i change the value of my "height" element when the device or width/height changes? my default height size is 180px (that's a rectangle in LG(large screen) but the height doesn't change when i try visit in mobile device (XS) mode.
i want to increase the value of "height" when someone visits website from XS or mobile devices.
i"m using bootstrap 3.3.7 in my project.
Defining Proper Media Queries
Bootstrap has clearly defined breakpoints for different kinds of
devices, specified by using CSS media queries. The following are the
breakpoint categories used for the different types of devices:
Extra Small Devices (e.g. cell phones) are the default, creating the “mobile first” concept in Bootstrap. This covers devices
smaller than 768px wide.
“Small Devices” (e.g. tablets) are targeted with #media (min-width: 768px) and (max-width: 991px) { ... }.
https://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
I am currently designing the home page of my website and I want to make a responsive website with 5 hexagon-shaped images, 3 on top, 2 on the bottom. So I created a container with a width of 90% and a height of 65vh it responds nicely to different screen sizes. I then made my 5 hexagons and set up the dimensions for my images, it looks fine on the mobile devices in chrome developer tools but you can see my hexagons appear bigger on ipad sized devices and becomes too big of an issue to ignore with laptops and bigger. Thats not the issue as I can change that by using #media queries.
I then decided to check all the mobile devices dimensions before I do #media and it works great for devices whose height is greater than or equel to the device width but my bottom 2 hexagons leave the screen if my device width is greater than the height. I have tried different approaches and I'm encountering the same issue. Its like they adjust to the change in screen width but not height.
I found out the problem was I needed to design the website for landscape mode because obviously asmaller height and larger width is landscape, Ill throw up the media query in case anyone stumbles on it:
#media (max-width: 1024px) and (orientation: landscape)
I am not able to figure out why this is happening, I am working on a fluid layout which is fluid till 1366px screen size and after that it is fixed, except header.
Now if I change my screen size anywhere between 1200px to 1366px then it does not make any change in html elements and instead a horizontal scroll bar appears. If I go beyond 1200px to anywhere till 300px or something it scales very well. But I don't know why is it having issue between 1200 to 1366px screen size.
ISSUE: I don't want horizontal scroll bar to come between 1200px to 1366px and make content scale accordingly, as it scales for other screen size.
And this issue is not on a single page, it is on complete website. You can see this issue happening on this website Winni.in
Any idea, where I am going wrong?
The issue appears because you have this declaration in your CSS
#media (min-width: 1200px)
.container {
width: 1330px;
}
}
Which means that starting from screen width 1200, the div will be 1330px. Just change it to 1200px or 100%, depending what result you want to achieve.
When i read about responsive design, people always seam to use this statement:
#media screen and(max-width: )
But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?
Thx ;=)
The screen resolution does not matter. The value used in media queries is the device width. For example:
My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:
/* Even though my phone has a screen width of 720px… */
#media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
#media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.
You can't directly query physical size.
You can, however, perform a media-type query for DPI along with Height and Width.
Example
#media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
This should be a good starting point: List of displays by pixel density
Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.
Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.
See Viewport Device-Widths for a list of common mobile screen sizes.
When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.
If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.
I have a Google Nexus 7 tablet I'm using for testing some responsive designs. In Javascript, the screen.width returns as 800px, as expected (the native resolution).
How come the following media query is picked up by the tablet when the max width of the screen is > 720px?
#media only screen and (max-width: 720px) and (orientation: portrait) {
.test{ background: red;}
}
Android does target density scaling in order to accommodate the varying screen densities of the Android ecosystem. The Android browser targets a medium screen density by default, trying to emulate the size of elements as if the screen was an MDPI screen.
Using this website, you can see that the result of this scaling is that device-width is 601 px and device-height is 880 px on the Nexus 7. Therefore, it falls within your max-width: 720px declaration and the background appears red.
window.screen.width and .height always returns the actual screen size. You have to remember that the Viewport Size and the Screen Size are two different things altogether.
If you do not want this behavior, you may add target-densitydpi=device-dpi to your <meta name="viewport"> tag. This will disable the Android target density scaling: device-width and device-height will report the native screen resolution of the device.
More information about Android's target density scaling is available in the Android Developers' Documentation.