Got sample set up here: http://codepen.io/rctneil/pen/myxDc and full page sample at: http://codepen.io/rctneil/full/myxDc
On that sample, I have a header with a .container within it, header is full width and .container is fixed to a particular width.
If you set the width to be 980 pixels or less then the page renders nicely on an iPad, if you set that width to be greater than 980 pixels then you start getting erroneous space on the right hand side.
I thought the default layout mode on iPad was that if an element is wider than the visual viewport, the visual viewport would zoom out until everything fitted and then allow the user to manually zoom into parts of the page. This is how it has worked in the past for me, I am sure.
Anyone know why the site is not auto zooming out to fit correctly?
If you set the height of the page large enough to require vertical scrolling, it will automatically shrink down the width. For example, set the width and height to 2000px on .container, and it shrinks the page appropriately. This probably isn't a viable solution in this circumstance, but it is a interesting observation of iPad viewport behavior.
I would recommend using iOS meta viewport tags. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
Related
hyhy, I've started a website and designed it for Firefox, but did the rounds and found Safari was not treating images in the same way. I'm running into issues with Safari making every single image's height the same as the browser's viewheight/viewport height. Here is a dummy site that you can pull up a version in Firefox and Safari to compare.
I'm running a 15 column grid without an exact column width (1 fr is used) or row height (min-content is used). In Firefox, the browser finds the width of the image based on how many columns the image spans out of the 15 total columns, and then proportionately sets the image's height. In Safari, the image has the same height as the browser window itself with no regard for how much of the width of the photo is cutoff and the extra burden of scrolling caused by this behavior.
Solutions attempted so far:
Defining a max row height: This solution gives Safari a pixel dimension to scale my image to and things behave correctly on images. However, the accordion at the bottom of the page has too much content when open, and not much content when closed, which requires a dynamic min-content sizing approach. When applying a maximum row height to my grid (example: grid-auto-rows: 175px;), the accordion's content extends past the grid. The result is the content of my accordion is not respected, the grid ends too soon and my footer inserts itself while the rest of my content balloons out the bottom of the page.
Define each image's px height in css: This solution just changes how the website looks in Firefox, with images not filling up the vertical spaces they need to.
Define each image's height as less than 100% of its parent element: This does indeed make the images smaller in Safari, since the browsers reads height: 100% and defaults to the browser's viewport height. However, this clearly breaks in Firefox and images fill less than 100% of the defined Row span.
This grid system is used all over my website, which is very photograph-forward. I'd love to not define a max row height, but Safari seems to be desperate for a defined row height but not want to do it the way Firefox does.
My hope? Some sort of minmax(min-content, defined-value) replacement that let's me have rows with zero content have zero height, rows with lots of content have matching height to that content and still have a 'default'? value for images to get their sizes from? What can I do here to get the look of the Firefox version to show up on Safari?
I have a footer styled for my Wordpress site, which is not appearing to reach the full width of the site on mobile. Also, I am always able to scroll width ways, as if the site is wider than the mobile viewport. This only happens on mobile portrait, not on desktop or tablet.
I have all widths set to 100% (the header, the body, the footer and several others) but it seems the footer width renders as 1333px width whereas the header and body widths render as 1349px (as in inspect dev tools on laptop).
I have no fixed widths for any elements set in pixels of over 300px.
The footer is placed outside of the main and the main container but within the body.
I don't think any of the elements within the footer are the problem, as I have removed them and replaced them but the same problem still exists.
Photo included: Gap to right of footer
This problem maybe because one of your HTML tags on the entire webpage (out of the footer) is bigger then the screen
This problem not from the footer,please check the other parts of the webpage
Hi Hazem and thank you for your reply again. Update: I now know what was causing this problem. A left margin set in pixels on my content div that was set to 80% width was adding to the gap to the right of the footer, but only on mobile view. I then realised that my media queries were not working but I have now sorted that out, hence I have sorted the problem.
Thank you for your help.
i am sorry to disturb you all, but i want to understand how a certain margin responsiveness works.
As you can see on this site http://www.trade-ideas.com/about-us/ the navbar, the paragraphs, the h1, h2 and the footer maintain the same left-margin as you resize the browser window (with firefox the effect it's more clear).
It's like when the elements reach the limit of the left margin (that is mean zero), they restart just on the same distance (the same margin-left) that they where before i was starting resize my browser width.
I've noticed that the navbar included in bootstrap also has this left margin responsiveness: as i resize in width my browser's window, the navbar continue to stay in the same left-margin range, restarting every time he reach the zero margin-left.
In fact, on this bootstrap page you can find the exact same effect in all the page's elements (the navbar and the div box on the body) : http://getbootstrap.com/examples/navbar/
With firebug i've tried to search what parameter set this particular effect, but i'm not an expert, and i didn't find a solution.
So, my question is: this left-margin responsiveness it's generated by a set of #media queries instructions to a set of width? Or there is something that i'm missing?
Thank you in advance for all the help that you'll give me.
Andrew
p.s.: i noticed that on http://getbootstrap.com/examples/navbar/ if i delete "margin-left:auto; margin-right:auto;" the effect that i need doesn't show up anymore.
I tried to create a div container with that margin auto on my site, but i was not able to ricreate the effect (maybe that "margin-left-right:auto" it's just a part of the effect).
The media queries are the ones that make sure the website is responsive. The example: http://getbootstrap.com/examples/navbar/ is using media queries to set the width of the container. If you set the media queries to change when the screen width is 700px and when you make the width of the screen smaller. The media queries will register the px of the screen and when the width of the screen is equal 700px the container will change.
I'm trying to create a page with a long strip of images, where the height of the strip is set to a percentage of the height of the browser window, and the images are scaled to 100% of the height of the strip. I also want to be able to overlay text on top of the images. I've got as far as this:
http://jsfiddle.net/bX8Cb/
But it doesn't behave as expected. The div.news-item elements should shrink to fit the contained img elements. This happens in Chrome/Safari, but when the window is resized the .news-item elements retain their original width rather than adjusting it to fit the resized images. (But if I then inspect the element in the Chrome developer tools it redraws the divs as desired.)
In Firefox the .news-item elements are given the full width of the un-resized image, although the image itself is resized.
What's happening here? Am I doing something wrong or is it a browser bug or something? I've been looking at the CSS specification for the width property and it seems like what I've done ought to work.
I have a background-image used to separate my page footer from the main content. It displays fine when viewed in a browser window wider than the supported min-width of the page. However, if the window is resized to be narrower the image is pushed to the right relative to the main body.
How it displays in wide browser windows:
How it displays in narrow browser windows:
Can I set the main body content not to push right up against the left-hand side of the window, but rather keep the 30 pixel margin when viewed in a narrow browser window?
The page is live here if the CSS will be helpful.
Yes, you should give the <body> a min-width. Just a little above 1000 works for me on your website, but I don't have an exact value. Probably the exact width of the ribbon.
-edit-
ribbon (1000px) + border (2 * 1px) = 1002px, that should do it.
The problem is that your #footerTop and #footer are too big and are responding to the window shrink. The way I would get around this is by adding the background to the #footerContainer instead. If you align it to the centre it will always work since #footerContainer does not have a fixed width.
This will also mean that you won't get the horizontal scroll bar when the browser window is resized to 999px wide. It all depends on how small you want the window to be able to go