I've been experimenting with my first responsive design, but i've hit a small brick wall.
When ajusting the size of my screen on my regular browser, it seems to break fine (one small, one large to start with):
#media screen and (min-width: 1px) {
#media screen and (max-width: 1300px) {
However, when I view it on a mobile phone, it seems to fail what i'm trying to achieve.
It seems to work on my HTC One in Chrome, but doesn't work on the default Android Browser.
It also fails on iPhone 4S, on both Safari and Chrome for iPhone.
I am using
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Any ideas as to where i'm going wrong?
Demo site: http://leafz.nl/new/
Edit: Screenshot of the layout on mobile browser (incorrect view): http://i41.tinypic.com/98t0ye.png
Regards,
Dave
Related
I'm building a site with materialize css.
The default mobile nav menu on materialize breaks on mobile devices for longer entries. Basically, the words will wrap to the next line and overlap the words below it displaying encrypt-o-jumble.
I went and added specific media queries generally formatted like this.
#media screen and (max-width: 870px) {
.xp-1 {
min-height: 100px;
}
}
I tested these in the chrome browser and they are perfectly responsive.
When I view the same site on any kind of phone, or the chrome browsers phone views the media queries activate as if they were on a smaller screen. Tablets are generally big enough not to trigger the media queries.
For example: at 375px on desktop a line will wrap to the line below. With the media queries this the element will expand, pushing the element below down and creating enough space for the whole link.
When viewed on a 375px iPhone x the element will expand, but the text will get smaller leaving blank space.
I have tried adding a few different meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Here's some screenshots of the menu:
On the iPhone X Chome view (375px):
Regular Chrome browser view at 375px:
Heres a link to the live site:
https://onesourcebenefits.com/
How can I make this display the same on mobile as it does in the browser?
I've read through a ton of info on this site so far, and am continuing to look into this. Any help would be appreciated. :)
In this case materialize was enforcing fixed heights on nested tags within li tags as in the example for their mobile nav menu. I removed the nested ul's and li's and replaced them with divs with padding and hover properties. Now the site is responsive.
I'm extremely confused by the behavior that I'm getting trying to do responsive design. I can't really put it into words, but this should show the problem.
The code I'm using for this test is here. Of note is the media query:
#media screen and (max-width: 425px) {
.container {
flex-direction: column;
}
}
Why does this query not trigger when the Device Preview viewport has a width less than 425px?
This is a common problem when you are using device mode(not exactly sure why). but most of the times it works well in incognito mode. Alternatively you clear site data and navigate to your site in device mode.
I had a similar problem just now, it was because I'd forgot to set the viewport up in my html file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The iPhone and other smartphone render a virtual window with of 320px. To work with this I used the meta-tag viewport:
<meta name="viewport" content="width=device-width">
The only problem is that my designer wants every smartphone to take 480px to render. Thus I tried width=480px, but I don't want tablets involved. Only smartphones should take this width of 480px. Is there a professional way to solve this problem (without PHP or JavaScript)?
My site isn't resizing or reorienting on mobile. I tried putting
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
in the code, but that didn't help.
Is there an easy way to have a site reorient itself on mobile and fit itself on mobile regardless of the orientation?
I've read several posts on this topic, but the solutions don't seem to be working for me.
Use media queries with max-width.
#media(max-width:479px){
//css rules for mobile here
}
Your site should adjust according to orientation.
See here are different media queries you can put in:
Eg iPhone5:
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
//your css style
}
Use (orientation:landscape) or (orientation:portrait) and do the css edits accordingly.
I'm unsure whether you have designed your site with 'fluid layouts' and 'fluid images'.
I'm having a bit of an issue. I have built a responsive site at http://www.nickpassaro.com/ClientSiteDev/New-NPD/ but for some reason, while it works perfectly on the desktop and rearranges its layout properly when you resize the browser window, it isn't working right on mobile devices. On the iPhone, its sending me to the tablet site, and on windows phone 8, it is showing me the mobile site but everything looks really zoomed out. My media queries are set to use under 640px for mobile, under 960 for tablet, and over 960 for desktop. Can someone hit view source on my site and see if they can see why it's using device pixels rather than CSS pixels?
thank you.
the reason its not working properly is that you have not assigned the Viewport.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
a basic viewport for your case can be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />