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
Related
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!
I'm working on a webpage for a client and I'm creating a mobile responsive version for them.
I've worked through most of the website, however, upon loading my 'Services' page, there is an eyesore of a gap all along the right side of the page. Strange, because it uses the same CSS as all the other pages, which all display at full 100% width.
Devices tested with:
iPhone 4 - Chrome, Safari
iPhone 5 - Chrome, Safari
I've also tested this with a Samsung S3, but in Chrome it seems to load fine.
In addition, I've tested it using the Safari developer tools and inspected the page.
It seems as if the HTML from the get go isn't conforming to the 100%.
I've got no idea how to fix this!
The page is http://temp3.advisible.com.au/services
Thanks in advance!
I've managed to solve this problem for anybody who has this issue in the future.
I used a Wordpress page selector and changed the html width of the page.
A messy solution, but it works.
<?php
if (is_page('services')) {
echo "<style>
#media only screen
and (min-width : 320px)
and (max-width : 480px)
{html {width: 340px; }}
</style>";
}
?>
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.