Does the 960-plugin in compass auto-clear floats? I would assume so, but I'm having trouble with my layout right now, so I am guessing I have to explicitly clear it using the compass clear mixin?
Looks like it doesn't have it. I checked the source code and saw this:
=grid-container
margin-left: auto
margin-right: auto
width: $ninesixty-grid-width
no clearfix in sight
Related
A freeCodeCamp lesson requires you to include height: auto in the following snippet for the answer to be accepted:
img {
max-width: 100%;
display: block;
height: auto;
}
However, height is auto by default, so I don't see any reason this should be added.
I have seen this used in other people's code as well.
Is this just an oversight?
You are correct. The default value of height is auto (per MDN), and for the scenario you're discussing (making an image responsive), you do not need to specify that property.
That said, when editing styles of an existing project, you may find yourself in a situation where you need to override already written CSS rules. That's where knowing about height: auto would come in handy - if you wanted to overrule a hardcoded height on an image and set it back to the default behavior.
No, not really. Height: auto is default, regardless if you put a width or length. I doesn't really matter, unless you just want to write more code or something. It is also may be used because if for example if you have:
*{height:200px}
Then you would have to override the default. 200px;
I am new to CSS/HTML and I am having some trouble adjusting the width of my page. I'm sure the solution is very simple and obvious lol.
On this page: http://www.bodylogicmd.com/appetites-and-aphrodisiacs - I am trying to set the width to 100% so that the content spans the entire width of the page. The problem I am running into is that when I try to add inline CSS, the external stylesheet called in the head is superseding the inline. I am using Joomla, so the editor let's edit the body, not the head (unless I create a custom module that rewrites code for the head).
I do not want to re-write/edit the external (main) stylesheet, since I am using this page for a contest and it is only running for about 1 month.
Anyone have any ideas how I can achieve this using inline CSSS and what the code would be?
Any help is greatly appreciated!!
#main, #content, .landing-wrapper, #column2 .box2 {width: auto;}
#column2 {width: auto; float: none;}
You should be able to place this in the head of your template's index.php, though I would personally add it to the bottom of the theme's main stylesheet. How long it's there isn't a factor.
you need to find the #main selector and set it wider there. The body is always going to be 100% wide unless you explicitly set it otherwise. In your case the #main container is the wrapper around the whole page, this is what you want to set. I'd also recommend looking up the "box model" and understanding how that works before going too much further. It will save you much weeping and gnashing of teeth. http://www.w3schools.com/css/css_boxmodel.asp
try adding inline .css {width: 100%; (or auto)} to :
- #main
- #content
- .landing-wrapper
- #column2 .box2
Basically, I want to reset (undo) a Twitter Bootstrap 2.2 reset for img that originates from the reset.less file.
Twitter Bootstrap is essentially setting this css:
img {
width: auto\9;
height: auto;
}
What CSS can I add after this to undo this? I'm actually using the bootstrap-sass gem, so that's what I need to deal with.
If I comment out the CSS in the gem source, my issue is resolved, but that doesn't help me when the gem is loaded by heroku. So I need a local override/monkey patch to fix this.
Thanks. Here is the issue: https://github.com/desandro/isotope/issues/335#issuecomment-11507013 and here: https://github.com/twitter/bootstrap/issues/6541
The problem without this patch is that the awesome isotope library can't function properly as chrome and safari can't draw the images correctly.
You can add in a new duplicate selector underneath this one:
img {
width: auto;
height: auto;
}
That should override it.
Adding it into a new file that is called under the main one in the <head> section of your document would work too.
I posted the answer here: https://github.com/twitter/bootstrap/issues/6541
Inlining this in the CSS worked, like this:
<img src="blah-blah" width=398 height=265 style="width:398px; height:265px">
In fact, I also tested Isotope without using the width and height attributes, like this:
<img src="blah-blah" style="width:398px; height:265px">
And that worked fine! Any recommendation if it's better to only specify the CSS?
I was able to very easily test this without bootstrap (or bootstrap 2.0) by using this CSS:
img {
width: auto;
height: auto;
}
It seems that the width and height in the CSS do override the image properties, and before the images get loaded, the browser does not know how much space to allocate, and then, even after the images load, the spacing is still wrong, at least with Isotope. Inlining the style does workaround the issue. I think I tried using regular styles, but that didn't seem to work, but I may have had a CSS priority issue. Any way, since the image size is laid out with the image properties, it's rather natural to put in this tiny bit of inline CSS. I hope we eventually find a better solution, as this will surely affect others when upgrading.
Or at least this should be documented that one needs to use the inline style for the width and height of the image rather than the properties.
Im using the bootstrap examples with Meteor (fluid.html). I've updated my bootstrap to the latest 2.0.4.
However I'm having an odd problem with the padding-top: 60px; conflicting in the wrong way with
#media (max-width: 979px)
body {
padding-top: 0;
}
and well.. webkit seems to do this (only on Meteor for some reason):
It ends up looking like this:
(Theres a gap at the top above the black bar) - Of course this is the fluid layout so the browser needs to be dragged down to small view (for iPhones/Androids/Tablets)
How would I manage to get the browser to take padding-top: 0 as the preference so It doesn't do this? Or why is it doing this (the css files are loaded in the same order - first bootstrap.css and then bootstrap-responsive.css. I can't figure out the difference
(its supposed to be like this: http://twitter.github.com/bootstrap/examples/fluid.html)
After upgrading to 2.0.4 I still had the issue where at certain resolutions content would get hidden when using navbar-fixed-top. This is what happens at certain resolutions:
After tweaking the CSS I came up with the following which fixes it at all resolutions when added to the top of my CSS file:
#media (min-width: 979px) { body { padding-top: 60px; } }
Hopefully this will sort out your issue.
It does not just do this...
It does more than that. You should inspect what padding-top is set to instead, go through the whole panel and see what is setting it, this should tell you where the problem lies. In a really worst case you could use padding-top: 0 !important; although it should be known that !important is bad advice and you should be able to get around not having to add that.
I don't see how Meteor is responsible as they don't add in any major CSS changes as far as I am aware of; but it might be that there is, but you can only tell if you look where padding-top is set.
I've read about quite a few people having a problem with this and I've tried all the solutions I can find - hopefully someone can't point out where I'm making a mistake.
I'm working on this site, and as far as I can tell, I'm in standards mode. The doctype is the first thing in the file, and it's valid. I've tried using a wrapper div or body tag with text-align: center and the container div using text-align: left.
I can't seem to find anything that works. Any ideas would be greatly appreciated.
Your problem looks like it's in the ie7.css file. It has this rule:
* {
display:inline;
zoom:1;
}
Inline elements don't have margins. You'll need to drop this rule, or add display:block; to .container_12 somewhere.