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?!
Related
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
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)
I have created a layout using DIVs/CSS. I have attached an example image and links below which shows how I would like things to be organized. Within the header, there is a logo and a menu which are cumulatively 1000px in width. The feature, content, and footer sections are also to be 1000px in width. However, the actual background images for ALL sections are 100% in width and are repeated horizontally.
Below is an example of what I want to do:
What I have actually put together so far (in terms of the design) can be viewed here: http://ohachem.com/2/. This is what I would like to follow. The CSS can be viewed here: http://ohachem.com/2/style.css
What is the best way to accomplish this? As you can see, the text in the "feature" section does not align completely in the centre. I've tried using clear:both, overflow:hidden, and several other methods, with no luck.
The "misalignment" of the "featured" text is caused by the floating logo. Because the float hasn't been cleared and extends outside of your header, it is causing that text to flow around it. Adding overflow: hidden to your #header element will correct it, but there's other ways to clear floats without adding extra markup.
Alternately, you could just make your logo the same height as the header. Right now the height property is set to the same value, but the logo has some extra padding, which is causing the overflow.
The website you're pointing to uses a liquid layout, here's a bunch of examples: http://www.dynamicdrive.com/style/layouts/category/C13/ .
One note, on your example, there's no positioning attributes that I can discern, a large part of making a layout responsive is ensuring it looks consistent across all browsers & screens.
I would Suggest you to use CSS3 Media Queries rather than Script for the Responsive/ Adaptive Web page design.
Please have a look at this
These do not process a lot, hence Light weight and most modern browsers and Devices support CSS3 hence a convenient and reliable Option.
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.