I am developing a website by downloading some template from net.
I modified some width and height according to our requirement the output is fine in PC but when I check it in mobile the contents are overflowing against background.
Please help me with some solution to solve this problem.
Thanks in advance.
You need to consider below dimensions then you have to write accordingly in every media screen using #media queries.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
I am designing a responsive website. In responsive web designing we cannot specify the image width and height in "img" tags. But without width and height the site is very slow. Is there any solution for this?
You can duplicate the image, one for large screen and one for small screens ( thumbnail ).
<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/>
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/>
Css:
.show-for-large {display:block;}
.show-for-small {display:none;}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.show-for-large {display:none;}
.show-for-small {display:block;}
}
And you can display:none the small img for large screen and on responsiveness you can do display:block;
The browser doesn't render the elements with display none, so this can be a trick.
#media screen and (min-width: 320px)and (max-width:480px){
css instructions
}
is overwriting very different instructions in
#media screen and (min-width: 480px) and (max-width:640px) and (orientation:portrait){
css instructions
}
but not the
#media screen and (min-width: 480px) and (max-width:640px) and (orientation:landscape){
css instructions
}
I'm assuming it's something to do with the 480 but I"m being very specific about the device widths so can't see why this would be happening. There's another generic structure css file which holds the main style for all devices but for some reason the one being overwritten isn't reading these but the 320/480 rules. Any advice would be good.
I have website with fixed width of 1000px. I want to support 2 smaller widths of this page. I have succesfully done this through CSS media-queries like this:
#media only screen and (min-width : 800px) and (max-width : 999px) {
#content { width:800px; }
}
#media only screen and (max-width : 799px) {
#content { width:600px; }
}
Now when I test my webpage on Android browser (2.3.3), it uses viewport width of 1000px so it displays website in full width. But it would be much better, if it would chosen viewport width of 800px, because webpage would display more optimized for device with smaller displays.
I know I can set viewport width using e.g.: <meta name="viewport" content="width=800px" /> or to set width coresponding to device physical width using: <meta name="viewport" content="width=device-width" />, but none of these would work. Because either it would force all mobile devices to always use 800px viewport in first case, or it would use physical width of pixels on device in second case, but that wouldn't work out too, because in portrait mode (how most people surf mobile web and use phone) that would be 300px or at most 400px, which is too small and user would have to scroll horizontally a lot.
So actually my question is this - can I support and possibly force mobile browsers to use different viewport widths depending on their actual screen size ? I don't know if I explained it properly enough, so I will get example what I want to achieve:
For mobile devices with physical width of 400px (modern devices with bigger displays) I would like to force viewport of 800px width and possibly with scale 0.5 so on first page visit would be displayed full without need of horizontal scrolling and with user option to zoom in to parts of the page.
For mobile devices with physical width of 300px ( some middle-class and low-end devices ) or smaller - I would like to force viewport of 600px width and possibly with scale 0.5 so on first visit would be displayed full or at least most of it on screen with little horizontal scrolling needed. And of course, user could zoom in to parts of the page.
Is this possible set up using just CSS or CSS3 ? I can imagine JS solution, but I would like to implement this just using CSS.
Thank you for any help in advance.
I do understand some part of your question...I have mainly worked on iPhone / iPad devices and less on Android ones...
I would recommend using
<meta name="viewport" content="width=device-width" />
to set the viewport based on devoce width..
Now even though you say, it would not work on orientation change, on the iPhone/iPad, the device width is always 768px whatever be the orientation.
So atleast on those devices, setting to device width would be fine..
For the Android devices, i am not really sure if the device width is returned different in each orientations..
My guess is it should be the same.
Could you please try setting the meta tag as above and see if it works fine. if no, i would be able to suggest some other way..
Thank you.
just add a few more media queries and css zoom
//base setting, overwrite with other queries
#content { width:800px; }
#media only screen and (max-width : 799px) {
#content { width:600px; }
}
#media only screen and (min-width : 400px) and (max-width :599px) {
#content { width:800px;}
//don't need to set zoom as it is handled by the next media query
}
#media only screen and (max-width : 599px}
body{zoom:200%}
//don't need to set #content as it has a default value of 600 set in the first media query.
}
You could also set initial-scale by doing user-agent sniffing, or adding it via javascript based on widow size, however via css only, you could use zoom to zoom in (user can always zoom out)
Here is some Css that may help you:
// target small screens (mobile devices or small desktop windows)
#media only screen and (max-width: 480px) {
/* CSS goes here */
}
/* high resolution screens */
#media (-webkit-min-device-pixel-ratio: 2),
(min--moz-device-pixel-ratio: 2),
(min-resolution: 300dpi) {
header { background-image: url(header-highres.png); }
}
/* low resolution screens */
#media (-webkit-max-device-pixel-ratio: 1.5),
(max--moz-device-pixel-ratio: 1.5),
(max-resolution: 299dpi) {
header { background-image: url(header-lowres.png); }
}
If not have a read through this link
http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
Have you tried simply zooming completely out, then letting the user scale in to see whatever it is you want?
Try:
<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />
You could do this in javascript by getting the viewport element (either by id or name) and setting it by inspecting the screen.width or window.outerWidth on the fly.
function setViewport() {
var viewport = document.getElemementById("viewport");
if(window.outerWidth <= 400) {
//screen.width gives display pixel count, use window.outerWidth for physical pixel count.
viewport.setAttribute('content', 'width=800);
}
}
The menu works great, except for a small range of screen sizes, around 764px.
The menu disappears.
http://pitts.mightysharp.co/wordpress/blog/test/
The break points cover it.
They are:
#media (min-width: 768px) and (max-width: 1024px)
#media (max-width: 767px)