There is something in my css causing my columns to squish instead of stack but I cannot find what it is. Any chance someone is seeing something in the code I am not?
Website link here: http://uspeqtest.000webhostapp.com/index.html
Thanks in advance for any info and tips.
main.css:907
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Don't switch .row to flexbox, you're breaking bootstrap...
At first, I'd recommend you to give us more details among your problem. Furthermore, I did take a look at your website and notice some faults in your source code (RMB on page - View source). So make sure you have no HTML errors at first.
Related
I'm having trouble with an css style applied to an overlay in a package called react-popup. The css style doesn't work properly in production, whereas it works correctly in development.
Basically these two classes seem to be the issue:
.mm-popup {
display: none;
}
.mm-popup--visible {
display: block;
}
In development it works, but in production .mm-popup--visible is always set to display: none;
it looks like it isn't even taking .mm-pop--visible into consideration and just using .mm-popup.
If I try and set it like this
.mm-popup .mm-popup--visible {
display: block;
}
The opposite happens, it works in development but not in production.
Thoughts?
Actually when you are combining classes of same div done leave space, ryt now what u need is .mm-popup.mm-popup--visible without space.. Thing is that your style is searching --visible as child of mm-popup but it's on same level. So you should use without space
I think there is a space between dashes in mm-popup--visible, you have made a typo it seems like mm-popup- -visible
I've used to vertically center block-elements like this:
.parent {
display: table-cell;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
When I need IE9 and lower support. Using css-tables as a fall-back for older IE-s of course. I don't need flex for anything else. But recently I started to ask myself: why do I even need flex here? Css-table is a robust solution supported by virtually every browser in this planet and according to this Ben Frain's article it's even faster. Isn't css-table enough here? When asking people about this I got answers like "flex is more modern" etc. That's fine and I do understand, that there are things that are only possible with flex, but it isn't really an answer here. We're talking about simplest centering block-elements.
So i have two questions:
Do i have to use flex in the case like this?
If "yes" - why?
There's a reason we moved from using tables in HTML as a layouting tool.
It's not semantic. When we think of a table we think of a representation of data.
MDN explains it well.
Prior to the creation of CSS, HTML elements were often used as
a method for page layout. This usage has been discouraged since HTML
4, and the element should not be used for layout purposes.
However, HTML emails are an exception where tables are still commonly
used for layout purposes. The reason for this is poor CSS support in
popular email clients.
So unless you're designing e-mail layouts do not use table elements or css table properties for layouting.
You can still use it if you need fallback hacks like in your example, but other than that use modern appropriate methods , be it grids ,flex , floats or whatever.
The webpage is http://www.parentcenterhub.org/region6-aboutus/ It is displaying correctly on all browsers except IE9. The CSS is:
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
The conditional css for ie 7 and ie 8 is:
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
There is no conditional css file for IE9. So, please suggest the code which I can put in style.css so that the page also displays correctly for IE9. Please help.
IE9 and doesn't support flexbox (see here for full browser support details), so you'll need to use something like your IE7/8 alternative layout for IE9.
You can work without having a conditional CSS for IE9 in one of several ways:
Use CSS's override mechanisms. Simply specify display:inline-block above display:flex (etc) inside the same selector, and every browser will pick the last defined option that they support. So if flex is below inline-block, IE9 will use inline-block because it doesn't understand flex, and others will use flex because they do know it and it's below inline-block. Sure, this doesn't deal with setting the width, but we've got half the problem solved without any browser-specific code at all (in fact, this would work for IE7/8 too, so you can reduce your specific code for them as well). width might be solvable with a similar trick by specifying a default value using a measurement unit not support in older browsers like rem or vmin or something, and then overridding it with % for the older browsers, but whether that would work for you would depend on your actual layout.
Use a library such as Modernizr, which will add feature support flags that you can use in the form of class names on your <body> tag. For example, it will add a flexbox class for browsers that support it, and a no-flexblox class for those that don't. This means you can write CSS code that targets browsers that support the feature or not -- eg:
.flexbox #primary {
display:flex; //etc...
}
.no-flexbox #primary {
display:inline-block;
width:70%;
}
Use a browser hack. I really don't like suggesting this, but it is an option. There are CSS hacks that specifically target IE9 if you really want to use them. I won't repeat them here though as I don't think it's the best option. If you want to use them, Google will tell you what you need to know.
Use an IE9-specific class just as you are currently for IE7 and IE8. You're doing it already, so it doesn't seem like it should be too much of a stretch.
Just use inline-block across the board. If the inline-block layout works, why not just use that. Flexbox is great, but if you need IE7/8/9 support, you're not going to be able to use it consistently, so....?
Personally, I'd go with the Modernizr solution. It solves this problem very neatly, and can also deal with most other cases where you might consider having browser-specific styles due to missing features.
I am using the Pure Grids of PureCSS. I have a pure-g with three pure-u-1-3, containing a few paragraphs. The problem is that there is a difference in display between Chrome/IE and Firefox when one of the units is longer than the others.
http://jsfiddle.net/f3YNe/3/
http://i.stack.imgur.com/VFVYu.png
I have tried to use jQuery to calculate the highest pure-u-1-3 and setting the rest to this height. But it didn't work out as expected, since this grid has to be responsive as well (using pure-g-r)
Does anybody know how to make Firefox produce the same output?
As purecss has fixed the problem (v0.6) by implementing it in every browser, this answer is obsolete.
Previous answer:
Your problem is that PureCSS is using -ms-display: flex in Internet Explorer and -webkit-display: flex in Webkit Browsers. Opera, Firefox and (obviously) older IEs don't get this solution.
To get it working in Firefox (20+) and Opera you could apply the following in your stylesheet:
.pure-g-r {
display: flex;
}
Further information: http://css-tricks.com/using-flexbox/
Here a example using your fiddle: http://jsfiddle.net/f3YNe/12/
This has been fixed and accepted as a fix as part of pure's v0.6.0 milestone.
The fix can be seen on Github here: https://github.com/yahoo/pure/pull/351/files.
If you're using pure prior to 0.6.0 coming out adding
.pure-g-r {
display: flex;
flex-flow: row wrap;
}
to your css should make things play nice in your layout.
Using flex box, I'm trying to create flexible article nodes that wrap when they fill their parent container (4 or so nodes per row). Currently, they remain on one line and overflow the parent without wrapping. Any ideas?
My css:
.container {
display: -webkit-box;
height: 100%;
width: 100%;
-webkit-box-lines: multiple;
-webkit-box-orient: horizontal; }
.container article {
-webkit-box-flex: 1; }
I have been experimenting a bit with flexboxes, but as far I could find out, there is no current browser which implements the "box-lines: multiple" command.
The Apple developer documentation claims that it exists since iOS 1.0 and Safari 3.0, however the status of all the flex-box commands still reads "under development". So the command exists, and is not rejected as an error, but only the "single" value is currently working, as it seems.
IE10 will have it implemented when released. The others might be doing so in the future as well.
http://www.boogdesign.com/b2evo/index.php/ie10-future-of-css-layout?blog=2
Here is another post I found about the topic.
http://www.xanthir.com/blog/b48Z0
"The multiple line support has been marked as at-risk in the new draft, as it appears to require a more extensive treatment than is given to it in this draft."
"A pair of properties, flex-break-before and flex-break-after, can produce explicit line breaks before/after a flexbox child, or prevent linebreaks from ever occuring."