There are 2 pages, that some part of the code is repeated, to this part of code, I apply this CSS:
#media (max-width: 767px) {
.sliderContent {
width: 100%;
}
}
When I check one page on an iPhone, it loads this CSS, but the other does not use this style.
I have added an alert with the screen size in both pages, and both have the same width.
Do you know where the max-width is taken? that could be making the difference between the two pages?
Can the HTML somehow affect the size of the min-width?
Max width is the width of the viewport in css pixels. What that declaration is saying is that when the viewport is less than 767px width, apply the .sliderContent style.
The reason it applys to the iPhone is that the reported width is less than 767px. If you were to open the page in question in a newer browser (IE9+, Chrome, Firefox, etc), and resize the window below 767px you'll see the same result.
https://hacks.mozilla.org/2013/09/css-length-explained/
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
I'm having a slight issue with my width=100% css rule. On desktop browsers it's fine, however on mobile, it only uses 100% of the device width. So On a phone I'll end up have a div that spans 480px rather than across the entire horizontal screen.
Thanks for your help!
#intro {background-color: #1F1F1F; width: 100%; margin: auto; display:block;}
#intro-inner {height:450px; width:1105px; padding-top:50px;display:block;margin:0 auto;position:relative;}
On the HTML page, the intro inner div is inside the intro div. The background color is blue. On a desktop the site appears fine. However on a mobile after the devise width, ex. 480px, the #intro div background and it's color ends.
Is there a way to implement show hide divs in a responsive website once the viewport contracts to say a width of 500px?
What I want to do is when the viewport contracts to the width of 500pixels each of the current divs can be hidden by show hide or a toggle or some kind of accordion?
What this means is that these functions do not "kick in" until the viewport contracts to this width.
Is this possible?
Here is the site I need to do this on:
http://surfingthebluemarble.com/mnews.html
Right now when this site contracts, the content is way too long. I need to hide to be able to hide and show those divs on click.
Thanks in advance for your help as always.
Regards,
umbre gachoong
Yes, you can create css targeted to certain viewports (screens)
e.g.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Refer this
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);
}
}