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?
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 am trying to optimize my website for smaller screens like handys.
But when I try to test it for screens smaller then 400px the body isn't the full width of the screen anymore.
this is how it looks for a 360px widescreen.
It says the HTML width is 360px, but it isn't the full width of the screen.
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)
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.
I'm using the Twitter Bootstrap to make my site responsive. I know that the Bootstrap works with four sizes:
x-small: for screens smaller than 768px.
small: for screens smaller than 992px.
medium: for screens smaller than 1200px.
large: for other screens.
And so, I would like to show my site like x-small in the device portrait orientation and like small in the device landscape orientation.
I have the viewport meta tag setted as:
<meta name='viewport' content='width=device-width, initial-scale=1'>
Everything is fine in portrait orientation, the site is shown like x-small. But the thing is that in a smartphone that has a landscape orientation as big as a tablet, it would be better to show the site as small in such wide screens, but it is kept shown as x-small.
I have tried different ways to write that viewport meta tag, like setting the width fixed and changing the scale, but nothing seems to work.
Anybody knows how to do this with Bootstrap?
Go Here http://getbootstrap.com/customize/
Customize
Download
???????
Profit
There should also be a link in your bootstrap CSS to Customize it.
If you can not do that, they you will need to manually go through all the CSS and change the #media screen and (max-width: xxxpx) { to match the new layout.