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.
Related
Ok, I can't seem to figure out how to do this for the life of me...
I have a layout that is 100% responsive. But I am comparing some products side by side on a specific page. So I have the content responsive but can only get so small. So I want my center container to be able to fit normally which it does but set a min-width of 767px. Once it hits this size the rest of the layout should still stay responsive and shrink with the browser but the content should stay at 767px and its container should have a scroll bar. All the rest of the site needs to stay with size of browser but just this container should have a slidebar and not shrink smaller than 767px. Does anyone have any idea how this could be done??
try to use the css media queries to perform the responsive options as same as what you need.
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.
Webpage made in 1024px width, but have a horizontal scrollbar in 1024 screens only.
Please help me to fix this issue using jQuery plugin or any other idea without reducing the width of whole site.
Bec. actual width of 1024px screen is about 960px (980px max) taking in account vertical scrollbar and borders.
UPDATE: Possible solution is to wrap all site in the block and set CSS property overflow-x: hidden;.
Everything what will overflow in horizontal will be omited while Y - vertical, will be of normal behavior.
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.
I like to display a div at width, say 900px initially and when the browser window shrinks below 900px, the div shrinks with it. I like to do this without using Javascript. I tried adding min-width:0px to the div but it didn't help.
So you want a max-width?
By default a div is width: auto and using a standard block box, so it will expand to fill the available horizontal space. max-width will constrain it.