I want to lose an element in my site that appears to a certain place while scrolling down the site. However, I only want to do this by phone. I think I can do this with the #media tag but I don't know how to look up to a certain place and then lose it is there that can help ?
You'll want to use the browser inspector and the option to resize the web browser to above and below the width of the phone size you're targeting. If you're using Google Chrome then there's a handy guide here on how to use the device mode in developer tools: https://developers.google.com/web/tools/chrome-devtools/device-mode
The other thing you'll need to do is to target the element in CSS and hide it depending on the browser size. The syntax will look something like this:
#media (max-width: 640px) {
.the-class-name-value {
display: none;
}
}
You'll need to replace the 640 part with the maximum browser size you want to target, and replace the the-class-name-value with the value of the class attribute on the actual element. Hope this helps!
Related
Getting close to finishing this WordPress website: www.the-hind.com, which displays fine on desktop browsers, but my only issue is that on iPhone ONLY the the sidebar on the right is pushed at the bottom of the page. I tried so many things in CSS but probably have been looking at it for so long that can't see the answer.
I'm sure (wishful thinking) that the solution is something simple & obvious, for an expert like YOU.
Looking forward to any help you can offer.
Your theme is Fully responsive by definition ( http://wordpress.org/themes/blaskan ) and this is how it is supposed to work ( it will not happen only in iPhone, but eventually in any device.
If you want to change it you should change the css file :
http://the-hind.com/wp-content/themes/blaskan/framework.css?ver=3.5.1
with the relative parts of the media queries :
/** =STRUCTURE MIN: 480px ----- */
#media only screen and (min-width: 480px)
and :
/** =STRUCTURE MIN: 768px ----- */
#media only screen and (min-width: 768px)
to understand more read here and also here or search "media queries" on google ..
The "iPhone only" will be due to screen-size. There will be other devices it happens on. So the key is to edit CSS and add the various sizes. While making your changes, test on all device sizes.
Try using this online and free tool which allows input of any sizes then the testing of multiple screens at once...
Responsive Design bookmarklet by Benjamin Keen
If you want a really nice and clear tutorial try this...
Responsive Web Design by Shay Howe
I have an image gallery, the images are large enough to fill an iPhone screen.
The images are also links, so as you can imagine, scrolling becomes quite frustrating on the iPhone because you're constantly clicking links by accident.
Is there anyway to prevent this using css alone?
If not then what would be the most simple solution to this problem?
Thanks!
I would suggest to use the Javascript. However, I found a way using only CSS. First step, you will need to identify the client browser, just add the code below in your HEAD session in HTML file:
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />
Only if client is using a browser in iphone, the content of "iphone.css" will be loaded.
In this file "iphone.css", you need create a class to disable the links:
.disableLink {
pointer-events: none;
cursor: default;
}
In your HTML code of gallery, add the references in your links:
IMAGE
These steps works only in iPhone/iPod touch, but if you look in my second reference, you will see the way to adapt for iPhone 4/iPod touch 4G:
I don’t think there’s a CSS-based solution (CSS isn’t really designed to change the behaviour of HTML elements).
You could use JavaScript on page load to check the width of the browser’s viewport, and then find and disable/remove the links if the viewport is phone-sized.
See PPK’s ‘A Tale of Two Viewports’ article to figure out which JavaScript properties to check to figure out the width in your situation (I haven’t done enough mobile development to remember off the top of my head).
I like the idea of pointer-events: none;, but I wouldn't use it because it isn't well-supported.
If we're defining a mobile device as just having a certain screen size, I would do something like this:
$(function () {
var mobile = ($(window).width() < 481);
$('#image-gallery').find('a').click(function (e) {
if (mobile)
e.preventDefault();
});
});
However, I would try to define 'mobile' as something else, e.g., a browser that supports touch events.
I am having problems with media queries not loading CSS or displaying the style correctly.
What I did was create a style480.css for my iPhone and style.css for normal.
I loaded
<meta name="viewport" content="width=device-width, initial-scale=1"/>
across my site so that it would work.
I set the css on the main site to read style 480 so I could stylize for the iphone. Everything looks great on my iphone, and of course it was just a boring list on my desktop.
After I got my style480 finished, I copied/pasted the css into a
#media only screen and (max-width: 480px) {
{
body {width:100%;}
}
in my style CSS.
Sounds pretty standard.
However it is not formatting correctly on my iPhone
The top nav menu (I used html 5 <nav>) is getting pushed to the left, a few of the lists are being floated when they shouldn't be.
It is like the iphone is mixing elements from in and outside the media query.
I have even tried putting the media query on top, putting it on bottom and loading
-webkit-min-device-pixel-ratio : 1.
Same thing, it is like it is mixing the css.
I even tried loading the css files separately on the HTML... exact same thing.
The only way I can get my iphone css to load correctly is if I set it as the main css for the page. When I am loading 2 sets of css it is not working on the iphone (but it works on my laptop)
If I can find a way to view the css from the iphone I might be able to figure out what it is doing, but until them I am at a loss as to why it is not loading the CSS correctly
It is like the iphone is mixing elements from in and outside the media query.
Well, yes, that's how it works. The stuff outside the media query will be used, unless something inside the media query directly overrides it. You shouldn't pase all your code into the media query, just the stuff you want to adjust for that resolution.
A media query doesn't replace your main CSS file, it supplements it.
Trying to write html help files that get included with our app on iOS.
For the iPad version, I want the help files to display a smallish graphic (about
156x204).
For iPhone / iPod, I don't want to have the graphic displayed.
Other than using javascript like the following in the file h_login.html:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");
which requires a clone of each file, I haven't found a method.
Would prefer to stay using minimal HTML ... vanilla, no CSS, a single "meta" at the
start to specify:
meta name="viewport" content="width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;"
thanks!
Stan
By far the easiest way is with a media query. I'm fairly sure i-Devices support this feature of CSS:
#media screen and (max-device-width: 600px) {
img.hide {display:none;}
}
Just add class="hide" to the relevant images, and adjust the 600px (I don't know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).
It is far easier to do this than to try and get JavaScript to do the same thing.
jQuery can do this easily:
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("img").attr("display","none");
}
That would remove all images from the document when the useragent is iPhone or iPod. If you aren't using jQuery, but you are using server-side scripting, we'd need to know what language you are using. If you are just using straight HTML, then JavaScript is your only way to modify the page, and jQuery will be your best bet.
The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)