I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
Related
EDIT: Setting the containing divs' height and width to rem sizes instead of em seems to have eliminated this problem. I don't know why. I tried replicating the code in CodePen to see if I could isolate it but it doesn't happen there, so I'm just hoping that someone has seen something like this before and can give me an idea of why this may be happening.
I have a block of images that renders sort of like a table, only it's not. It's just a bunch of inline divs containing img tags, and I allow the divs to collapse according to their default behavior when the page resizes, because it works fine, just as long as I set a min-width to make sure they remain at least two columns wide.
My problem is that some of the images sometimes load as larger than they should - even though the containing divs have explicit height and width set (the images are set to height: 100% and width: 100%). This happens only in Chrome mobile (at least of Chrome, Firefox, Edge and IE on PC and Chrome and Firefox mobile), and yet sometimes it works - you can keep refreshing and see issues with different images, and sometimes they're all fine. Firefox mobile renders it fine every time.
So of course I plugged my phone into my PC to load up Remote Devices in Chrome devtools and try to investigate - but as soon as I connect to the Remote Device in devtools, the pictures on the phone instantly resize into their correct positions right before my eyes. Does anybody know why this might happen or what I can do to get them to look right on every load?
You can to use the bootstrap class; class='img-responsive'
see example below:
<img src="images/footballkids.jpg" class= 'img-responsive' id="img1" onmousemove="cssmouse();">
I have the same problem described here whereby on higher dpi displays, firefox appears to be scaling my whole site up by 20%. This includes all site elements, not just text.
Is there a way to force firefox to display pixel-pixel accuracy? for example, I have a wrapper set to 800px at wider viewports, however, firefox is ignoring this by increasing it by 20%, which causes scrolling.
a working copy of the site is here
I have already set viewport and css reset.
The same issue is described here Note that don't want a local fix for this, but something that will work for anyone that views the site.
Thanks.
Or who knows, maybe it's Chrome, Safari, and Opera, which all show the images how I want them, that are wrong.
Essentially what I have is an image and some associated text that I want on the side of the image when the window is big, and below the image when it is small. The problem happens when the window is mid-range width. The image should shrink a bit to allow room for the text (as it does in webkit/blink). Anyway, it's probably best demonstrated in a jsfiddle:
full screen
editor
I included some Javascript in there that I use to control the height if the image is taller than the window, but I guess jsfiddle doesn't update window.height and that part works in all browsers anyway so I didn't bother debugging it. Though I am curious if anyone has a CSS/non-javascript solution for that.
And I guess the fullscreen javascript doesn't work in jsfiddle either, so I just uploaded an all-in-one file here where everything does work (besides the issue I'm writing about.
.mediaFile { width:auto;}
changing to…
.mediaFile { width:100%;}
I found changing .mediaFile width to "100%" makes Firefox show the image at the correct width most of the time, but causes other issues with fullscreen and small-height-windows that makes it more of a problem than a solution.
I run a site using a liquid tri-column layout with a header. The layout runs nicely for more than a decade with all browsers I ever dared to try. It is based on absolute positioning in CSS. This page provides an example of the actual site.
Watching the page from my tablet I found that the right column overlaps the center matter. Further investigation using Firebug showed that once the center content reaches 360px width, the right margin of the div shrinks. Why is that? Since Firefox and Android render the same, I guess that this is something, which is actually supposed to be.
However, I tried to make virtue out of necessity and experimented setting min-width for body and content and made the body scroll overflow. The body actually scrolls, but the right column is positioned on the right edge of the viewport instead of the body element (Firefox). Is this intentional CSS standard?
Any ideas how to solve the presentation on small displays?
Thanks for your efforts,
– lars.
I pondered a while whether I should revoke the question or provide this self-answer. I decided for the self-answer since I wished some of the answers in related had been presented when I wrote the question.
First the 360px limit apparently is my own stupidity. There is a comment form, which refuses to shrink. It scrolled out of my view.
The issue of the wiered positioning had been solved by adding position:relative; to the body. The reason is explained in this question.
The overflow setting I used during experimenting is not necessary, since the default behaviour scrolls already. But using any overflow directive wrecks IE8.
So thanks a lot, the pool of answers finally had it all.
I've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.