When I have the Chrome developer tools open and I resize my site, it neatly tells me the width.
My site is adding a horizontal scrollbar when it drops under 495px. This is odd since I need it to at least be responsive or elastic down to 480px.
I am using percentages for widths, so I'm struggling to find the CSS that's stopping the site from narrowing further.
This can happen if you have a min-width on the entire body element of 480px, perhaps to set the lower limit for phone screens, and the page content is long enough to add a vertical scroll-bar.
The vertical scroll-bar is not accounted for in Chrome's measurement and being 15px wide, the horizontal bar appears when the tool reads 495px since its actually 480 + 15px.
Arguably its a bug in Chrome, maybe its just the way it works. You're best off taking out the min-width anyway and just letting it flex down past 480px.
This is happening to you because the content width is bigger than 480px. It's the same when your page height is higher than your browser. Try css media-queries to set css styles according your browser width. (This is called responsive web)
Related
Update: It turns out Apple just silently prevents you from having a fixed-size iframe in iOS. Awesome. How to get an IFrame to be responsive in iOS Safari?
I am trying to do something I expected to be really simple: embed a fixed-size <iframe> inside an absolutely-positioned div.
This is running on WKWebView on an iPad.
No matter what I try (and I've tried everything I can think of), it will not respect the size I tell it to be, and instead always auto-sizes its height to match its contents.
I'm just trying to figure out how to stop this.
Here are the CSS attributes, taken right from Safari while connected to the iPad:
The <iframe> element itself also has its height and width attributes set to the same values:
But as you can see from the Computed view, it is completely ignoring all attempts to set its height and ends up rendering like this:
What in the world is going on? It is causing my web app to scroll way out of the bounds of what should be its fixed screen size. I've been fighting this thing for over an hour and have made zero progress.
You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.
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 :)
I have a site with a fixed header and fixed side nav, and scrolling content.
I've found that on some pages, users with smaller screens can not access all the menu items as the fixed side-nav extends off the bottom of their screen.
Is there any way round this?
I did a quick mockup to illustrate.
http://jsfiddle.net/cr0wn3r/ycTXF/
It's all fine till you shrink your browser, and then you see the leftcol goes off the bottom of the screen and there is no way to scroll to it.
Using media queries, you can detect the size of the viewport, and then conditionally style your sidebar accordingly (perhaps placing it after all the content if the height of the viewport is too small).
This article by Ethan Marcotte explains well what you can achieve with responsive sites, while this site demonstrates how different viewports can be handled.
The key is to use media queries to handle different viewports correctly.
You should probably used media queries to change the styling of your fixed nav for users with smaller screens. Smaller font-size, padding, whatever.
There is a great article by Chris Coyier explaining CSS Media Queries here http://css-tricks.com/6731-css-media-queries/
I could think of the solution to add
overflow: scroll;
To your CCS (I've done this on your fiddle). It's ugly but otherwise your visitors have to buy new screens...
Or maybe you can just adjust the font-size?!
I suspect my question may be too general, but I hope someone with expertly knowledge of CSS could help me work out a solution.
My site looks acceptable (to me) in high-resolution monitors (1920X1080) – but on smaller-resolution screens the left site doesn't fit - and even though the horizontal scrolling appears eventually of you make the window smaller, but it appears "too late" and doesn't include anything left of the main content panel.
That's the particularly I'm particularly concerned about. There are other resolution-related problems, too.
Here's the site:
http://www.cybart.com/bscg/
I would appreciate it if you could take a look – and would be grateful for suggestions / recommendations / advice from CSS masters!
Here's how I understand your problem:
If someone goes to your website on a smaller screen, maybe 1024x768 or something, there's no scroll bar's appearing.
You need to set up a minimum width / height for a div container for the page content. Then if the browser is narrower than that you'll get the scroll bar.
I suggest instead that you make one div tag that won't be wider than say, 950 and put a nice background behind it instead. No one wants to scroll left or right in the browser.
Use width and height css tags on a div containing the page content.
I have a lower resolution screen... and I see the issue.
You might consider shrinking the size of the main content section and then shifting over the nav.
Or -- better -- auto center your main section using margin:0 auto; and then position the left nav accordingly.
The scrolling bars issue has to do with page overflow. You might be using overflow:hidden and when the page doesn't fit the browser doesn't show the scrollbars.
Take a look at http://www.cssstickyfooter.com/ and resize your browser window to < 600px.
Notice how the header and footer elements fall short as the content overflows beyond their width.
Is there any way to prevent this from happening so that when the page scrolls horizontally, the header and footer don't fall short?
This issue can be solved by assigning a min-width to the elements that are not stretching along with the rest of the document.
In a DOM inspector on the example site, try adding:
min-width: 960px;
...to the header and footer. Problem solved! I've used this quite a few times with good results across all browsers and devices.
What you're seeing is a side effect of making the window more narrow than .main, .foot, and the other layout elements with static width. If they had no widths, or smaller widths, it works just fine.
No one actually users a browser with less than 600px width. Even 800x600px is dying with most people, take a look on this survey results: http://www.w3schools.com/browsers/browsers_display.asp
You should only worry with horizontal overflow and other problems for smaller page widths for mobile devices, in this case, a proper mobile browser and specific stylesheets will solve the deal.