I'm experiencing an issue when setting a minimum width for an area. The problem is when the browser goes smaller than the min width, the background color/image set by CSS doesn't expand further than the window size. In other words if they were to scroll to the right to view all the content, the background seemingly disappears.
If the browser was 1000px wide, and my min-width is 1200px, then the 200px outside the min width area won't have the background.
Ideas?
DEMO: http://www.nickersonweb.com/demo/PMS/index.html
You're on the right track. I had this problem once as well when I was making a site that had repeating horizontal edges. The solution is to also give your parent divs <div class="banner">,<div class="body">,<div class="footer"> the css style of min-width: 1000px;. Now it will show just fine when you scroll.
Related
I have an Angular Material table where I want the header and footer to be sticky and the content to scroll. To do this I simply need to put the table in a container, set the height to a certain amount of pixels, then set the overflow to auto. This works as intended. I just need something like this to work for multiple resolutions. If I set my div to 600px it looks great on my computer but someone else would see a double scroll bar.
As mentioned if I set the height to a fixed amount of pixels that works great (eg: height: 600px). I've tried using the calc function(eg: height: calc(100%-200px)) but that doesn't seem to work, the table just takes up all the room.
I have done a bunch of media queries at 10px intervals and set the fixed height in each one. This works but seems like a terrible solution.
I feel like there has to be a way to set a fixed container to have a height that is the screen height minus a certain amount of pixels (to account for the header and some white space at the bottom).
Use vh rather then %
height: calc(100vh-200px)
The website screen resolution for a 1366 x 768 shows 1351px width in Chrome. The same for 1920 x 1080 shows 1905px width. I have checked padding, margin and border and everything are 0. Anyone knows where this 15px goes?
I am not just talking about my website. It is there in every website we take. Just try Inspect here itself in StackOverflow and click on body tag to know its size.
That might be width of the scroll bar.
Add position into your style sheet, something like this:
position:fixed
Makes position fixed relative to viewport
if that doesn't work, try:
position:absolute
Makes position fixed relative to document
Take a look at http://benoitfal.com/tess.html on an iPhone and notice how my container div is wrong... It should be 100% width of the browser.
Say your iPhone is like mine 375px wide - this is 100%. Your images are wider than 375px, so the iPhone has zoomed out to show the whole page. The container is still 100% (in my case 375px), which is why your box is only about half of the screen. If you make your image widths 100% instead of their actual size, they will shrink to fit the viewport.
Original solution for desktop:
Your box is 100% width of the browser but you've added padding of 6px to each side. Unfortunately this gets added to the width which is why it's overflowing.
Set box-sizing: border-box on the div and it will fix it.
More about box-sizing here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Because this isn't a fully accepted bit of CSS yet, you should use browser prefixes as per the example in the link. If you're using Compass for your SASS, you could use #include box-sizing(border-box).
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
I use Twitter Bootstrap and the non-fluid non-responsive grid at 940px. I want to insert an image rotator outside it at 1200px, which I succeeded, but when I make the the browser window smaller I get a horizontal scrollbar at 1200px. I want the browser to center at the 940px grid, so when I make the window smaller the horizontal scrollbar will not appear before I'm at 940px.
I know that I can use a background-image width 100% width and centered, but what if I want to put in normal content and divs etc width fixed width?
Here's a sketch I made: http://f.cl.ly/items/1x3f3w1B1X461q3b2H21/bootstrap-grid.jpg
So for example I have a div at far right with the image counter. If you have a large screen above 1200px, then fine, you can see it, but if you only have 1024px then you won't see it, and you'll now have any horizontal scrollbars either.
I think you have to overflow-x: none; and then trigger the scrollbar with javascript when the window width is below 940. I don't believe there is any other way.