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)
Related
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
I apologize if I sound vague/ abrupt.
The web page should be in tune with the browser size. I mean if the browser size is reduced/ shrunk, the full web page should also shrink and should be visible in the shrunk browser window. Is this possible ?
You will need to use media queries for a responsive layout in your css
Example:
#media screen and (max-width: 699px) and (min-width: 300px) {
<css template for 300 to 699 px width goes here>}
You can also use bootstrap (a responsive framework which has predefined classes for what you may need) for a faster implementation.
When writing media queries for smaller devices coming from a computer-first approach rather a mobile first approach such as for cell phones and ipads, what are good ranges of width for smartphone size and Ipad size?
#media screen and (min-width: _____) and (max-width: _____)
{
code
}
Media queries change all the time based on new devices and screens. It really depends on what you're trying to target.
But here's a great resource that can make like a little simpler
www.css-tricks.com/snippets/css/media-queries-for-standard-devices
Cheers and happy coding!
computers/laptops usually begin at 1200px, so when designing a website try to have your main container have a max width of 1199px so it will work on all computers and laptops.
ipad horizontal is 1024px,
ipad vertical is 768px.
cellphones will max out at 500px,
iphone 6+ is 414px,
iphone 6 is 375px,
iphone 5 and below is 320px.
androids range from 320px-500px.
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'm building a Wordpress theme and everything is peachy but I have problem with the layout on IE8 on a screen resolution smaller than 1200px
Basically my layout has 1200px grid width but I figured that there will be a problem with 1024px screen resolution (20% of the population bla bla) so I created media queries when the screen size is smaller than 1199px the grid to change its width to 960px and so on for tablets, phones etc.... and problem solved! EXCEPT!!! for IE8 which does not support media queries and the theme does not resize properly on IE 8 with screen resolution of 1024x768px and ofcourse lower....
So my question is how can I make the design change the grid width to 960px ONLY on IE 8 and lower and screen size bellow 1200px?