I have just launched my website http://www.connorgraham.com.au and am having mobile viewing issues. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile, you are able to scroll to the right to show a white bar that covers 20% or so of an iPhone screen. The website should be full width and you shouldn't be able to scroll to the right. I believe there is some kind of viewport issue, however I am unsure.
I would appreciate any help, and am happy to provide any of my code if it would help solve the issue.
Im hoping you have access to the css files. You need to change the top logo and bottom logo widths using media queries. Right now there is a media query for the top logo set at 900px. This needs to be changed:
#media (max-width: 399px) {
.mobile-logo {
width: 200px;
float: left;
}
.footer img {
width: 150px;
}
}
#media (min-width: 400px) and (max-width: 900px) {
.mobile-logo {
width: 300px;
float: left;
}
}
EDIT: I changed media query to 399px
EDIT: I made the header logo 50px wider (now it is 200px instead of 150px) in the small query
Also, I would change the meta view port to the this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
From my experience it is a bad idea to prevent scaling. This sets the initial scale to 1 and if people want to pinch and zoom they can. This is ideal because you do not always know what the user likes, or if they have a medical condition/disability.
I think this is what you need:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This should disable zoom and will prevent the issue (at least what I think the issue is).
EDIT:
As Charlie pointed out, there is a risk to completely disabling scaling, and a better alternative is to set it to a particular max value so users can still zoom some. This is particularly important for people with disabilities who may be trying to view your site.
Related
I have added a media query to my code and it works fine when I resize the window in my browser but when switching to the mobile view it doesn't work the way I want it to work. What am I doing wrong here?
The browser view:
The Mobile view looks like this:
And, when I resize the window in my device it looks like this (Is what I am trying to achieve in the mobile view) :
--
Below is the media query trigger for this :
#media (max-width: 770px) {
#title {
text-align: center;
}
.title-image{
position: static;
transform: rotate(0);
width: 70%;
}
}
I don't know what to do here. I am following a course on udemy and they didn't mention this or I may have skipped that part by mistake. And I watched it again but I still am stuck here. It would be a great help if someone could point me in the right direction.
You probably need a viewport defined in the header of your HTML Doc.
This will tell the website what size it should be. It probably thinks it should render Desktop-View. Use this:
<meta name="viewport" content="width=device-width, initial-scale=1" />
I am having some issues with media queries. They're just not working. I have a pretty blank site right now - it's just one page with one img in it.
This question is related to this one, but is not a duplicate.
In my previous question, I was unable to get the image to center horizonally on the page when the max-width was 480px.
The code I was using:
#media (max-width: 480px)
{
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
}
Now, I have managed to solve that - partially - by adding:
<meta name="viewport" content="width=device-width" />
to the head section of the document. But now, on a different phone which has a width of 1280px, the img still centers! Even though the only style in my CSS specifically says max-width:480px.
Why is this happening?
I have two phones. One phone is 480px wide and the other is 1280px wide. Why does the img center on the 1280px phone when it shouldn't be?
Found this - http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
Apparently, a devices resolution impacts its css width. I think css itself has an average pixel width which may or may not correspond with high-res devices out there.
So, according to this page, your 720 width still falls under CSS' understanding of 480. Hope that answers your question.
What you could try is -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The above is from https://stackoverflow.com/a/19933195/3652449
What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?
Here's my viewport tag:
<meta name="viewport" content="width=device-width">
I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display
#wrapper {
background: green;
margin: 0 auto;
width: 1060px;
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body { min-width: 1080px; }
wrapper { background: red; }
}
The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.
However, if I change to my viewport tag to:
<meta name="viewport" content="width=1080px">
I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.
Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!
Many thanks in advance!
EDIT:
It seems this has been raised before, same issue, and yet no solution:
How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
I'm developing a mobile site for the first time and i'm trying to create a responsive design.
So far i'm having a lot of trouble with the viewstate settings. Mostly on Android but also some on iPhone.
I'm using these settings:
And i'm also using this in my CSS (just to be sure):
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
It works perfect most of the time on my iPhone. But sometimes when i change to landscape and then back to normal, the resolution of the page gets smaller. And sometimes it stays the same (as it should).
On the Android phone it works perfectly both in landscape and normal modes. Here my problem is, that sometimes when i refresh the page, it seems like the mobile doesn't read the viewport settings at all. It just looks like a normal webpage that isn't optimized for mobile.
Anyone have an idea about what i'm doing wrong here?
EDIT
i also tried to add the meta viewport tags (i don't know why my code doesn't show up in this post, but that doesn't Work either).
You could start by simplifying and rechecking your code.
In the head of your page make sure you have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If there are additional viewport tags, remove them for now.
For the media queries in your CSS use
#media (max-width: 767px){ /* adjust viewport width as req'd */
.selector{ ... }
}
and remove the the other # tags you've used (eg #-ms-viewport)
Good luck!
I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done.
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport.
Why is this happening and what do I do to make it work?
Thank you very much for your time!
Mobile browsers won't know what to do unless you specifically instruct them.
The viewport metatag is essential when designing responsive layouts. To fix this problem, simply add the following tag to your website's <head>:
<meta name="viewport" content="width=device-width">
If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look:
<meta name="viewport" content="width=device-width, initial-scale=0.7">
Have fun,
Adam.
Check your CSS. You haven't closed your curly brace. or you have typo error.
/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
padding-right: 5px;
pading-left: 5px;
}
example css.