trying to set different layout using media queries
i have truble with defining divs layout according to the screen width
this is the fiddle result
and
the fiddle test project i am using
the problem is i would like it to get stack on top of others
red
green
blue
when hitting less then 1200 px
what am i doing wrong ?
The main problem you are having is that CSS is ignoring your #media code. You are using inline CSS, and inline CSS rules always wins from external CSS rules (== your #media code).
recommend reading up on the cascading order of CSS: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
For your jsfiddle, transfer all code from the style="..." to your css frame on the right, making it external css instead of internal CSS. Then just reorder it like this: if you want media to override default css, place your #media selector under the code you want to be overridden.
Not sure if this is what you want but check this out: http://jsfiddle.net/4v6FC/11/embedded/result/
I think you have a problem with css rules precedence: the display property defined in the style attribute of your div elements have more precedence than the one defined in your stylesheet, no matter the screen size.
For the example I just set this property for all div elements, outside the media query, and removed the display property from the style attribute.
Here is an article explaining cess rules precedence : http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Try using display:block instead of display:inline-block for class Middle
the problem is you have three containers who are taking the width and have display:inline-block. so they will be aligned parallel to each other. if you want this behavior, then you must warp them in a outer container and set its min-width to make it placed fixed in that position by specifying divs width in px rather than in %, see here.
if you want elements to stack over each other then you must use display:block. in this case you don't need anything else.
Related
I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
I have a bunch of inputs in bootstrap that have input-group-addon tags as labels. On my page, I have labels of various lengths of text, but I want all the labels to be the same width for the visual effect. I'm trying to manually set the width of these span elements to the largest one I have on the page (for this example, say 75px).
Making my own CSS class doesn't do the trick, bootstrap overrides it somehow that I don't understand.
Making my own .input-group-addon.myClass CSS class doesn't work either. The browser shows that this isn't overridden by another style, but I don't see it actually effecting the span element.
Lastly, simply adding a style="width:75px" to the span doesn't work either.
I'm at a loss as to how I can ovveride this style to make all my span's line up regardless of text length.
Code example: http://www.bootply.com/SvJAiwVavY
I looked at your sample code. From Bootstrap, the .input-group-addon class has a display property set to table-cell, so there is no need to do anything other than set an appropriate width. If you set a width that is smaller than the contained text, it's not going to look like it has changed. Try changing your example code to the following:
.input-group-addon.test {
width: 200px !important;
}
You may want to change your text-align to something other than center, but that's up to you.
I know that #media can be used to detect properties of the whole viewport, and then switch among CSS rule sets based on different types of media/widths, etc ..
But how does one switch between CSS rules based on the width of parent div, etc ?
This code preview shows the footer of my page, with some elements changed/removed:
Liveweave: http://liveweave.com/JtUxpF (Switch to Split V or View mode from the top menu)
On the right side of the footer, there is a small form (marked with the red arrow in the picture above). This form has a #media separation applied to it, like so:
#media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
#media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
Problem:
My idea was to actually apply CSS rules based on the width available to the form from the parent div. However the CSS rules are currently applied based on the width of the screen/viewport.
If you reduce your window's width to less than 270 pixels, you'll see the visual change in the form's look!
So how can I choose and apply between two different sets of CSS rules, based on the width available to the form, instead of the viewport width itself ?
Not possible in pure css. The equivalents of "if" statements in css is currently limited to media queries and selectors, neither of which get you what you need. You can use something like less or sass to do what you're trying to do, or you can generate rules dynamically using a server-side or javascript approach.
sass: http://sass-lang.com/
less: http://lesscss.org
There is some support for math in css (calc()), but no ability to use those as conditional clauses.
I'm just geting started with twitter bootstrap and wanted to know what the best approach for changing the default width from 940px to 864px is. I tried using the customize page to change the #gridColumnWidth variable to 50px. which should make the total width 820px but the default width is just adjusted to 1170px after downloading. Should I just leave the default at 940px and nest a div with a width of 864px inside my .row>.span12 divs?
I also tried using the less files but when I try to compile them as css files I get errors that say classes, id's, and variable are undefined.
Thanks for any help,
Jason
It's working fine for me using the customize page.
Make sure to modify #gridColumnWidth, #gridColumnWidth1200, and #gridColumnWidth768 (and optionally #gridGutterWidth*).
The 1170px width you're seeing corresponds to #gridColumnWidth1200.
You can override the default styles by placing another CSS file with the same selectors and desired formatting after bootstrap.css. Optionally you can also just use selectors with higher specificity and then the order of the files will be irrelevant. Using !important should be a last resort as it complicates further use.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.