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.
Related
I 've created a site using Dreamweaver, and all my images have absolute position with % metrics. it expands proportionally on wider screens, but everytime I try to resize and shrink browser window it just becomes a mess with all the images fallen in one narrow window. How can I rebuild my design so it shrinks in a browser window in a way that when it is too small for an element, it just wouldn't fit. Do I have to use fixed pos-ing or any other type of pos-ing? Whats the usual way web designers do the sites?
P.S. my site contains text and abs. images, as well as fixed image that scrolls with the screen. What should I use to keep it that way but make a decent view in all screen sizes?
Use media queries or place a min-width on either the body or the element in question. For example placing min-width:900px on the body will stop the entire body from re-sizing below 900px width. (Note: That is not the responsive way to do things. Media queries are a much better practice)
Site in progress: http://www.modernfuture.net/wordpress
I've been banging my head against the wall over this for hours - when I resize my browsers width (by dragging the browser window's right resize handle) my site maintains that nice responsive centered effect I want for roughly 1/8th of my browsers window size. However when I drag the browser's right window resize handle from right to left past this point (roughly 1/8th the width of the browser window, when the browser window is taking up the full width of my 1080p screen) my site (header, content, and footer) stops staying centered and the resize handle crops over the site rather than maintaining the responsive centering that I'm looking to achieve.
I've tried applying the "margin: o auto;" trick to the body class and the wrapper class individually and simultaneously, but it doesn't yield the desired results.
I'm really at a loss for ideas here. Can anyone offer some insight please? Thanks!
You need to remove the width from body class and margin also need to set margin:0px;
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.
I have a website but when it is loaded it is too big to fit on the screen. If I adjust it to fit on my 17" laptop, when I test it on another laptop it is still big. Is there a property I can set so it is automatically adjusted to fit on the screen so no scrolling bars appear?
You can achieve this by using relative measurements instead of fixed ones.
I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths.
Furthermore, I would also like to set a minimum margin for the page (e.g. 16px) so that there is always a gap between the content and the edge of the page.
Ideally as in the image below:
What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? Whenever I've tried to do this I can only get one or the other.
Thanks for any help in advance.
There are a few different ways to do it, but this jsFiddle illustrates how I would do it: http://jsfiddle.net/joshnh/UDwcp/