Just a quick question from a colleague of mine, I have made his website responsive and at 800px the navigation gets hidden and the mobile menu appears using the standard CSS media query.
Viewing the website on an iPad, it is displaying the mobile menu but my colleague thinks that the iPad should display the website as it is on desktop as it has a screen resolution wider than 800px.
Is this correct and if not, why not?
Thanks.
An iPad's width in portrait is 768px. Check out viewport sizes. Things get a bit more difficult to understand with higher resolution displays. There's already a question posted about that here at Stack Overflow.
Related
I am working on creating a parallax-ish scrolling effect for the mobile version of my site. The effect works fine on a desktop when I shrink the browser, or when I use Chrome's mobile viewer, but it doesn't work on my phone.
Here's the live example. Shrink your browser below 980px wide to see the effect. http://imbibe.staging.wpengine.com/
It appears that on mobile, the background image is shown at full size, and doesn't remain fixed.
It's just a CSS effect, no js or anything. Let me know what more details I can provide and I will! Thanks.
I have a site that I am working on at http://wpmend.com. The site looks ok on desktop but on Mobile well, I think my custom CSS has messed it up. You'll see that the text and button on the homepage section don't look right, and in the Request a Job section, the buttons for the first two job types don't show up at all.
I have searched this site and found similar issues and fixes but none that have addressed my exact problem. Please advise on how I can fix the look on the mobile site. By the way, it's a Wordpress site using the Rapid theme.
Thanks in advance!
Scott.
Maybe you're good working with a media query for CSS3.
Add this code to your CSS for the page, where #container is the object that wraps the button at the top.
#media screen and (max-device-width:480px){
#container: margin-top:15px;
}
This will implement this CSS code when the device width is smaller than 480px. It'll move your container below your header down a little bit.
Note: not all mobile devices are smaller than 480px, you'll have to implement multiple media queries for specific devices. Refer to: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.