To start off I am not an expert at this, as a matter of fact I'm following along in a online course. My test website comes out fine on desktop but on mobile it's misaligned and squished. I have already used this:
meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"
and other variants of this but nothing seems to work. Here is a link to the github page:
https://wunray.github.io/cv/
Can anyone explain to a novice what exactly is going on to cause this?
As far as I can tell, there's nothing wrong with your meta tags. It's just a css problem.
With these changes, your site perfectly fits on mobile:
You have some elements with negative right positioning. Either make them right: 0 on mobile, or add overflow-x: hidden to a parent element (ie. body).
Add img { max-width: 100% } to your css so images don't exceed window size.
The page design is breaking because of your css. Meta tag is fine.
In h1 tag you can use ->
word-break: break-word;
Also adjusting width of img will make the page responsive.
Related
I'm facing this strange issue that looks like a bug on Chrome mobile.
I have a div with position:fixed; aligned to the top right corner of the screen. On desktop, it works fine (it stays in place), in mobile, however, the div is moving when I scroll up or down. I made a video to explain it better:
https://www.youtube.com/watch?v=gCgN6ULkcMg
On scroll up works fine
on scroll down, a piece of the div with position:fixed disappears outside the viewport
I tried to isolate the problem on a fiddle, but couldn't reproduce it. So I encapsulated the entire website in a fiddle, and the issue stopped ocurring. I still didn't understand why.
Website isolated in a fiddle:
Removed*
Live website:
Removed*
Furthermore, I performed some tests on different devices, on the live website:
Chrome mobile: Bugs
Chrome desktop: Works fine
Firefox mobile: Works fine
Safari mobile: Works fine
Can someone explain me why Chrome Mobile have this issue, while the others don't?
My position:fixed div looks something like this:
div {
position:fixed;
top:10px;
left:0;
width:100%;
text-align:right;
}
*Removed the links because it's a client's website. The solution is in the answer below.
For some reason, my Google Chrome on mobile required minimum-scale=1 in the viewport <meta/>.
<meta name="viewport" content="minimum-scale=1"/>
The problem is with meta tag you must put there
<meta name="viewport" content="height=device-height,
width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no, target-densitydpi=device-dpi">
This is because Chrome browser change height of viewport.
Some of your elements go out of the viewport, therefore Android Chrome auto scale the viewport. Decrease the elements which are bigger like the viewport.
If you want the element to start and stay at the top of the page try using
#header {
position: sticky;
top: 0;
}
That just worked for me, at least in an earlier version of chrome desktop, when fixed was not behaving appropriately. Just be aware that relative positioned elements will not ignore sticky positioned elements like they do fixed.
Not sure if this will help but it's the answer I was searching for when I got to this question.
It's good to check if there is something hanging out your viewport, adjusting the viewport meta tag may not be needed.
If that sticky thing is still wobbling, or just to give the browser a little more time to breath, consider adding
transform: translate3d(0, 0, 0);
This will help you, my friend :D
When using z-index too, make sure it's applied always, assuming z-index is no applied non-sticky.
In my case the reason was missing the following CSS:
img {
max-width: 100%;
}
When i added this CSS then all went well
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
I am working on this web page: http://dev.mailagent.biz/cms/NEWS
It is responsive HTML that works fine in all browsers, all window sizes. It used to work fine on iPhones too, until iOS9 came to be. Now the whole site is broken. Extra margins (I am guessing) have been added, meaning all boxes appear to have a lot of white space. Below is a screenshot from my iPad.
I set the viewport as
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
I tried setting the margins to 0 and even to negative values, but the boxes don't move. I also tried removing any white spaces between div tags, with no change.
I am using a responsive css for all browsers: dev.mailagent.biz/cms/css/main_responsive.css
Then attaching this one specifically for iOS9: http://dev.mailagent.biz/cms/css/iOS9.css
However, most of the styles are still ignored, especially to do with margins. E.g. the iOS9 stylesheet should actually align the whole site to the left (.centeredWrapper has margin:0 not margin:auto). I know that the iOS9.css IS attached for iPhones/iPads, as e.g. some margins and colours were successfully changed in the menu across the top compared to the desktop version.
Does anyone have any idea what's going on? How to I tell Safari to stop trying to be clever? Or how should I change my markup?
Try adding a shrink-to-fit to your viewport tag
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
line 281 (or 98) in main_responsive seems to be the culprit:
.content ul, .content ol, :not(.content ul.slideshowUl) { margin: 0 0 10px 30px;}
I commented that out in the Safari inspector and the whole page went back to normal.
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.