I'm developing a site that is 600 pixels wide and using responsive queries to make it fit in different devices. I'm using the following code:
<meta name="viewport" content="width=device-width" />
#media only screen and (min-width: 320px) and (max-width: 480px) {
/* iPhone */
.container { width: 100%; max-width: 480px; }
...
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
/* iPad */
...
}
I have a problem with the iPad, though. This device viewport is 768 pixels wide, and therefore the site renders correctly but is shifted to the left because its width is narrower.
My question is, is there a way to center the site or alternatively make it fill the whole iPad screen?
Thanks in advance
Try this:
<meta name="viewport" content="600" />
More on that here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Or to centre the container (assuming it's 600px wide)
.container {
width:600px;
margin:0 auto;
}
Though it may be worth making the site larger in the first place.
Why make the site 600px wide? You should make the site fill the 100% of the viewport by default, and then adjust the margins around the content, font-size, the size of the images etc. for each screen size so that the content adapts.
You could take this site as example. If you try making the browser window bigger and smaller you'll see that all the content adapts (and even a mobile menu appears when the viewport is that small) All of that is accomplished using media queries for different screen sizes.
(Sorry about my syntax)
Related
I would like the content of my website header to occupy 100% of the screen width on regular-sized desktops/laptops, but to be centered on larger displays. By "larger displays", I'm referring to the actual size of the display too, not just the resolution. On my 15" laptop and my 23" desktop (both having the same resolution of 1920x1080), I would like the displays to be different. Having such a wide menu on a 23" display doesn't look good as there are wide empty parts.
I'm currently using a .container BootStrap class for the contents of the header, and I overrided a media query so that the container has a width of 100% when the screen width exceeds 1200px. Again, this isn't really what I want :
If the screen width exceeds 1200px, the header width should be 100%
If the screen width exceeds 1920px, the header width should be the default one, and the header should be centered
If the screen width exceeds 1200px, and the screen itself is large (anything above 19"), the header width should be the default one, and the header should be centered.
I'm not sure if that's the best approach, but I'm open to all suggestions.
Thanks
My solution was to use media queries based on pixel density
This allowed to write something like
#media screen and (max-resolution: 116dpi){
116dpi is the DPI of a 19" screen with a resolution of 1920x1080. If the screen gets larger, say 23" with the same resolution, pixel density gets lower, then we have something below 116dpi.
Try out setting media screen and limitation through min-width.
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media screen and (min-width: 1200px) {
.container {
width: 100%;
}
}
#media screen and (min-width: 1920px) {
.container {
width: 500px;
}
}
I've made a website that stretch a container to the bottom. In that container, there are divs that fit perfectly the screen at low resolution such as 1366x768 ...etc
But when the resolution is higher (1440x900...etc) There is a blank space left under the divs (link to view website at different resolutions)
So is there a possibility to fill that space with divs only in high resolution ? I've tried overflow-y:hidden,but since the container's height must be in auto it doesn't affect it.
Use media queries that target resolution like
#media screen and (min-resolution: 300dpi) {
#myDiv{
display:block;
}
}
Alternatviely, you can target dimension such as width like
#media screen and (min-width: 1000px) {
#myDiv{
display:block;
}
}
I have a (rather simple) website that I wish to automatically scale and adjust such that the main content area fits in the screen without horizontal scrolling on iPad. On Landscape mode it works fine, however on portrait mode it leaves out part of it on the side, and the user has to scroll horizontally.
It normally works fine for other websites I did, but for this one I can't understand what is stopping Safari from doing this.
I added the following line at the top of the HTML but it doesn't seem to have any effect (I tried various alternatives like adding the initial-scale=1.0 etc. too)
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
What could be the reason this is not working?
Clarification
I am not looking for a media query solution. I am just trying to understand why for some sites the iPad (and other touch devices) automatically scale down a website to fit on screen, while in this case something is causing it not to. I am just trying to identify the reason for it.
there is fixed width given for inner container
div#branding{
width: 1024px;
}
#content{
width: 1024px;
}
div#footer{
width: 1024px;
}
change all the 3 width to 100% for #media screen
more information on #media screens can be found here
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
div#branding {
width: 100%;
}
#content {
width: 100%;
}
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
}
and it will work
the right side footer content will come down as the left side content is more
screenshot
note : your footer will broke as fixed height is given you can remove it
for fixing your footer change css for footer
div#footer {
height: 40px; /* remove height */
display: inline-block; /* change display:block to display: inline-block; */
}
screenshot
I used width:100% and it solves my orientation layout situations, but there seems to be media queries that can help too:
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
Check this site out for more: http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/
Let us know if it works out.
Depending on rules you got in your CSS you will need to assign portrait mode such as landscape or portrait and add desired width also.
#media screen and (orientation:landscape) and (max-width:1024px){
some rules that will be applied to iPad in landscape mode
}
And big big difference is this, which will be applied on all 1024px screens
#media screen and (max-width: 1024px){
some css rules for "normal" screens on max-width: 1024px
}
EDIT:
So make sure that you put your "container" divs on 100% in various modes and adjust all other elements. the scrollbar you got is actually DOM element with fixed div or margins and paddings that affect width of whole page
I think the meta tag has a minimum scale besides the maximum:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
What I don't know is if it will make any difference at this point.
It should work in theory, along with:
#media only screen and (min-width: 480px) {
/* landscape */
}
#media only screen and (max-width: 479px) {
/* portrait */
}
I finally figured out the problem. iPad (and most touch devices) actually scale the website automatically, without the need of the <meta name="viewport" ... > if the website is not explicitly designed to be responsive.
However, this scaling does not seem to work when the website is too wide. My content was 1024px wide, which for some reason was triggering the devices to turn off scaling.
I changed the content's width to 960px (I don't know the actual threshold, but my other site that scales well had this width) and the issue was immediately fixed.
Adding this answer in case someone is looking for a reason why scaling is not working on his site.
Obviously this is not related to having a responsive site, this is just when the website is simple and scaling is enough.
What I'm noticing is that Safari by default scales the web page automatically. However if the user manually applies some scaling - Safari stops its automatic scaling.
In my case this was the reason why it scaled some sites and others don't.
Hi I am making a responsive site, and using media query for that following is my code:
(LINK)
#media screen and (max-width:960px){
/*Here Goes my code for screen size 960px */
}
#media screen and (max-width:700px){
/*Here Goes my code for screen size 700px */
}
#media screen and (max-width:625px){
/*Here Goes my code for screen size 700px */
}
I have given min-width to body as 250px
But still I am getting a horizontal scroll on Opera-mini, is there any other hack that I should I use to make media query work on opera mini.. this is the link if want to see on your opera mini mobile LINK
I had the same issue.You can make your body tag's overflow to hidden
Add this in your site's head tag, may be it will work: <meta name="viewport" content="width=device-width"/>
is it working ?
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.