I am creating a page # [link removed]
The header at the top is really large (1600px) to accomodate wide monitors. Setting the header to 100% width doesn't work, because the rotation produces some weird effects.
I set the body overflow-x to hidden, so that a horizontal scroll bar doesn't appear. The layout should accomodate normal computer resolutions.
The problem is when you visit from a device with very small resolution, e.g., a mobile phone, or if you resize your browser window. It would be very helpful to have horizontal scrolling in this case, but it should ONLY scroll enough to be able to see the picture, and no further.
Does this make sense? Let me know what I need to clarify...
I've tried doing combinations of min-width and overflow-x on the body and header, but can't seem to find a solution that works.
Thanks!
Jeff
Use <link rel="stylesheet" media="handheld" href="%%%.css" type="text/css" /> to target the handheld devices, and set the overflow-x to auto in the handheld stylesheet. Or use JavaScript to load a stylesheet based on scren res
<script type="text/javascript">
if (screen.width < 1024)
</script>
My answer is a complement to 0x60's answer.
I recommend using CSS Media Queries instead of JavaScript to detect screen widths.
For example:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
/* Styles */
...
}
Check these articles out:
Media Queries for Standard Devices
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
Related
We are looking for a way to create a div class to only appear on mobile, ie. when the resolution is below 1024x768. We currently use:
hide-below-768
for resolutions above 768.
Would anyone be able to advise on setting for below?
Thanks in advance.
You're looking for media queries
#media screen and (max-width: 768px){
/* add css here */
}
This allows you to apply different class behaviours, wrapping and sizing rules depending on the browser view port size.
But this won't be just for mobiles. It's also works when reducing the width of the browser window on desktop browser.
It's part of a technique called responsive design.
http://www.w3schools.com/css/css_rwd_intro.asp
Im a total newbie as far as mobile devices are concerned. Anyhow, i created a webpage (still under construction) and implemented it on the existing wp theme called govpress (yes, i know it might not be the most practical way to make things happen but with my coding skills it was the easiest). Now i just cant get it working correctly with mobile devices. I havent found the code that makes it behave as it does. So, on a mobile it seems to scale the page to screen width resolution of the device(?). Also the background and the header div (full width) scales to device screen width. And even if i zoom out it doesnt enlarge the bg nor the header div. Is it the theme that has this behavior somewhere coded or is it somewhere in the css..!? Heeeelp, please!!!
Find the site on http://www.lifespectrum.eu
And heres my css: http://lifespectrum.eu/wp-content/themes/govpress/style.css
(lots of thrash there though)
Please ask if you need anything else!
Thanks in advance!
The scaling is done in the css file via media queries. Adjust these statements accordingly to make the background/header do what you want:
#media screen and (max-width: 840px)
#media screen and (max-device-width: 680px)
#media screen and (max-width: 480px)
Mobile behaviors are CSS. Your last CSS codes #media screen and (max-device-width: 680px) are doing this behavior. You can easily check your responsive style just by making your desktop window screen smaller and larger. By doing this, you can easily see that your logo header is responsive but your body content is staying the same.
I would inspect element on the body and do the same as you did with the .logo You can preview your changes by editing right in the inspect element with chrome (right-click & inspect element) just to see how it'll look.
It looks like your background/header are the only elements that have css written to resize them in the media queries cfnerd listed.
The content area has the classes you need to adjust settings for in the media queries at different widths. For example, you have .topwhite and .top divs set in the css to a static width of 810px. Once the window width is smaller than 810px those will give you the nasty horizontal scrolling bars. One quick fix is to set them as a
width:100%;
max-width:810px;
so that at most they can go to the original size you set but as the device or window width gets smaller the size of those divs will shrink along with it. That will only help you with the containers, you will have to also add new css settings for the contents as well. But you can use the same idea.
You may need to implement the viewport mets tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}
I am really helpless with this problem, please advice.
I have web page that I want to optimize (with CSS media queries) for mobile devices. In <head>, I have this:
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
But some problems appear when testing media queries:
1) Testing on my Huawei Ideos X1, which has display width 240px. So, CSS should look like this:
#media (max-width: 240px) {
body: { background-color: red; }
}
but it do nothing.
2) "Where could be problem?" I said. So, I am giving javascript for displaying screen resolution to the <body>:
<div>
<script>
document.write(screen.width + 'x' + screen.height);
</script>
</div>
But it shows "320x425". This is weird, my mobile has screen width 240px, not 320.
3) Doesn't matter. I read about mobile browsers which auto-zoom thats content for displaying more content into one screen. Maybe my mobile browser zoomed out and now display area 320 px width. So, I am adding two lines to the <body>. One with width 240px, second with width 320px. Expect both to render in mobile browser without scrollbars, climbed to the screen:
<hr style="width: 240px;">
<hr style="width: 320px;">
To my surprise, screen was climbed with first line (240px), the second line (320px) went out of the screen (for 80px) and horizontal scroolbar appears.
So, to cut a long story short: Javascript thinks to have 320px wide screen available. CSS thinks to have 320px wide screen available. But only 240px can fit into the screen. Similar behavior shows on my friends iPhone.
Please advice me, where is my mystake? Thank you.
P.S. Test source code can be found there: http://pastebin.com/ULNm4RfW
I think one of your issues could be resolved if you designed with a mobile-first method. That means design for the smallest screen size (mobile) and then move your way up to larger.
Your css would turn from max-width to min-width values, like so...
#media screen and (min-width: 240px) {
CSS: here;
}
So all of your basic styles that you set in the beginning would be for the smaller screen sizes, and the rule above would set styles starting with any screen size 240px or above.
This also will remove the need to use any JavaScript, which you should try to avoid using when browser sniffing screen sizes.
I have a website using a huge background image (2000x1500) in a div container (100% x 100%).
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting "hidden". Exactly the same happens.
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
Adding this worked for me when I had a background image on the background canvas...
body{ -webkit-background-size: 2000px 1400px;}
Obviously one has to replace the dimensions with the correct size for the image.
You should definitely create a separate stylesheet for the iPad.
You can use the following to do so:
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that's the only thing you've got a problem with. I'd say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
Let me know how it goes.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/
It seems that this issue only occurs on the iPad when you have a background image that is attached the the <body> tag. If you place the background image into a containing div, the issue can be resolved -- this is a great work-around if you don't need to have your background image "fixed", as the techniques to make background fixed work in IE mandate that you use the <body> tag for images.
You can see the difference in these two sites, the first uses the <body> tag for positioning (due to the fixed positioning on the background image) and the second uses a containing div:
http://www.mricsi.com
http://www.collinshirsch.com
Hope that helps!
edit -- this is not entirely accurate -- it seems like this is the case only some of the time, and the reason behind why is unclear.
I've got a 5400x556 as a (scrolling) background image in a div. As a .jpg it gets scaled down drastically, as a .png it's fine. The only trouble now is the .png is 5 megs. Grr.
Good call on the separate stylesheets though.
good luck
owen
I use:
body {min-width:2000px; min-height:1500px }
You can use the solution of #UXdesigner to create a seperated stylesheet for iPad. But you can use a single statement in your current stylesheet:
#media only screen and (max-device-width: 1024px){
.yourClassname{
max-width: 500px;
}
}
and of course for smaller devices like phones you can use:
#media only screen and (max-device-width: 480px){
.yourClassname{
max-width: 100px;
}
}
Note that these suggestions only work in CSS3 (the latest devices all accept this)