I have being tearing my hair out trying to get a fix for this, the site is built with Twitter Bootstrap and is responsive, and works fine on all devices apart from iPad & iPad mini in portrait where it is always wider that the devices screen.
I know that there is a problem on device rotation with iOS devices, but this is on page load in portrait.
Any advice would be great, I am not sure if it is a problem with Bootstrap or something I have done.
http://bodysgallen.ws-django.co.uk
you may need to make a new set of responsive CSS to fit that screen size.
EG you have something like this #media (max-width: 979px) & #media (min-width: 1200px). You might need to add another one in between to handle the size of the iPad on portrait.
I'm not sure if the problem is related specifically to iPads. Something odd is happening with your grid at a viewport of 769px - 945px (approx). It's not responding correctly.
If you check validation results for the page there are a number of errors which aren't too important but at the end there are two I would fix, an unclosed container div and a body tag that was already closed. http://bit.ly/11fKdhG
While these 2 errors aren't necessarily the cause of the problem, I think you want fix them first.
Hope this helps!
Related
I have used a media query on my webpage and included a meta tag in my html to make it responsive for smaller devices as follows:
#media only screen and (max-width:768px){/*code for smartphones*/}
<meta type='viewport' content='width=device-width,initial-scale=1.0'>
NOTE: The media query code is to make the page viewable for smaller devices.
The problem is when I try running the code on the microsoft edge emulation tool or my smartphone the css code inside the media query does not run and as a result my webpage looks very small on small devices, the media query code only runs when I scale the browser window to a smaller size.
Please let me know how I should fix this so my webpage is responsive on all devices and tell me if I should elaborate more, any help is greatly appreciated thank you!
Originally what I wanted to do was to make the webpage responsive for mobile phones rather than different browser window sizes, I guess I should have mentioned that explicitly. I fixed that issue by using max-device-width rather than max-width, thought I would just share this for anyone encountering the same problem.
I am fresh new to CSS in general and responsive design specially,
I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :
#media screen and (max-width:720px){ etc ...}
That works ok and my footer is restyling well, my question is :
This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ?
I mean if i try with :
#media screen and (max-width:1280px){ etc ...}
To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ?
What is the correct usage, ? Thanks
Don’t worry about a device being mobile or desktop or whatever.
Media queries allow you to apply difference style sheets based on the window size.
If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.
How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)
Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.
I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?
I feel like I'm missing a very obvious trick!
How it should work when adopted into the CSS standards:
Use #media queries in CSS, along with the #viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:
http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/
An example from the above link:
#media (max-width: 699px) and (min-width: 520px) {
#viewport {
width: 640px;
}
}
You could use this to set different viewports on narrower and wider devices.
But for now, seems JavaScript is the only way to do it:
You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.
See http://www.webdevdoor.com/responsive-web-design/change-viewport-meta-tag-javascript
Use media queries for different sized screens, ie: small(phones), medium(tablets), and desktop versions. You will only change the content thay needs changed in the queries. Then also set a meta tag with the viewport set at 1.0. Search around for media queries, there's a lot of information of there. Good luck!
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I'm using the Semantic Grid System to build a responsive site. However, something isn't quite right with the media queries that should obviously kick in once it hits a particular screen size.
I'll reference what i mean with their example on the website : if I view this on my iPhone for example, given that it is supposed to adjust to a single column structure on a mobile device, it still throws out the web version of the page. That is true for both Safari and Chrome on my iPhone. However, if I use the RWD bookmarklet to check it's appearance at different resolutions it appears as expected for the mobile resolution. Also, ironically, if I resize the page in Safari on my desktop it also adjusts accordingly once I get down to the approriate screen size, but not in Firefox.
The media query that it uses once it hits 720px is
#media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
.column(12);
margin-bottom: 1em;
}
}
and I might be wide of the mark here but I think that must be the issue. But given that this is directly from the semantic.gs website I don't think I have the expertise necessarily to question their own code.
Any idea what the problem might be?
The behavior that you describe can be the result of not using the 'viewport' meta tag in your markup:
<meta content="width=device-width" name="viewport">
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/