I used flexbox to spread the list items in the footer navigation across the width of footer.
It is being displayed correctly in my browser and also in Chrome's mobile emulation. However it is ignored on any mobile device I've tested with (iPhone, iPad, Samsung tablet).
Does anyone see anything obvious wrong with the code I'm not aware of?
Below is the CSS/LESS snippet I'm using.
ul {
display: flex;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
This is happening as display:flex & justify-content: space-between are not compatible in all type of browsers.So we should have a cross-browser compatible CSS like this:
ul {
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
width: 100%;
padding: 0;
li {
padding: 0;
}
}
Browser Support for display:flex
IE 11
Edge
FireFox 22+
Chrome 29+
Safari 9+
Opera 17+
Android Browser 4.4+
Browser Support for justify-content: space-between
IE 11
Edge
FireFox 20+
Chrome 52+
Safari 9+
Opera 12.1+
Android Browser 5.6+
Useful Links:
https://caniuse.com/#feat=flexbox
https://caniuse.com/#feat=mdn-css_properties_justify-content_flex_context
https://css-tricks.com/using-flexbox/
Related
Too much trouble in cross-browser testing for Safari since bootstrap 4 has added additional properties for rows the grid format is showing disturbed. i want to show them exactly as in Chrome or Firefox. i have tried all the existing fixes related to this issue but some how it doesn't seems to work for me.
.row::after, .row::before
display: inline-block!important;
width:0px;
height:0px;
Following are the properties of Bootstrap 4 which are not supported in Safari
.row
display: -ms-flexbox; //not supported in Safari
display: flex; //not supported in Safari
-ms-flex-wrap: wrap; //not supported in Safari
flex-wrap: wrap; //not supported in Safari
margin-right: -15px;
margin-left: -15px;
.col-6
-ms-flex: 0 0 50%; //not supported in Safari
flex: 0 0 50%; //not supported in Safari
max-width: 50%; //not supported in Safari
Try setting the ::before and ::after on the row to display:none; as follows:
.row:before, .row:after { display: none !important; }
I'm having trouble with Safari adding a 1px margin/gap to the left on the first element in a flexbox row. I've attached an image below of the issue:
The flex box css is:
.equal-height {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
}
The child elements are set to the following:
.child-div {
float: left;
display: block;
width: 33.3333%;
box-sizing: border-box;
}
But they I have noticed that they are computed with no float
file: style.css;
line: 1028
.row:before, .row:after{
content: " ";
display: table;
}
add:
width: 100%
and now the "margin" is solved.
The grid system you used has problems with safari: change it.
Hope I've helped you.
I've noticed this as well. Here's what worked for me:
.row:before, .row:after {
display: none;
}
The reason they are computed with no float is that flex cancels them.
As per flexbox spec:
float and clear have no effect on a flex item, and do not take it
out-of-flow. However, the float property can still affect box
generation by influencing the display property’s computed value.
So 100% width on the flex container as per Michael is ok, but if you want flexbox, what you want is:
.child-div {
width: 33.3333%;
box-sizing: border-box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
i.e. You need to use either floats or flex, but not both.
You may want to have a look at this flexbox generator to understand how flex works.
<a id="asapg" href="/link/">Text</a>
a#asapg {display: inline-block;cursor: pointer;padding: 15px;text-align: center;border-bottom: 1px solid rgba(121, 119, 119, 0.15);text-transform:uppercase;font-size:16px;width:100%;vertical-align: middle;background: rgba(255,255,255,0.6);min-height: 170px;}
I am trying to vertically center the text in the middle for the link but no luck.
Set the line-height equal to the height of your element (170px?)
a#asapg{
...
height: 170px;
line-height: 170px;
}
You could also use flexbox, CSS3 feature.
a#asapg {
height: 170px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
align-items:center;/*Vertical align*/
justify-content:center;/*horizontal align*/
}
I have a strange css problem that appears to exist only in Safari.
I have rows of 5 boxes. There is no attempt to make this responsive, each box is 160px wide and they fit within a set width container of 900px.
See here: http://bit.ly/1rs97IB
In Safari only, when a box title wraps onto two lines, the whole box is pushed upwards outside of the row. This does not happen within IE, Opera, Firefox or Chrome. Can anyone work out what might be causing this and suggest an approach to fixing it? It's driving me a bit nuts...
After a lot of experimenting I came up with this: Change the display to flex for two of the containers.
.post_gallery_row {
margin-bottom: 21px;
padding-bottom: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.post_gallery_item {
width: 160px;
margin-right: 21px;
margin-left: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
I have no idea what specifically caused the error, but this is something atleast and I hope it helps.
My website is http://www.parentcenterhub.org/region6-aboutus/ This page is displaying correctly in Google Chrome. But, the layout is messed up for Internet Explorer and Firefox. I think this is CSS issue. The CSS code is
#primary { display: -webkit-box; // or display: flex; }
.entry-content img.alignleft {margin-left: 0px !important;}
.custom_list { float: right; display: inline-block;
width: 30%;
list-style-type: none; }
-webkit-box will only work in webkit browsers - which Firefox/ IE are not. You need to specify the vendor prefixes for it to work in all modern browsers.
#primary {
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
This however won't work on older versions of IE (as with everything else..). Check here http://caniuse.com/flexbox for information on what versions of browsers support this property.