Cheerychops Cheerychops - 1 month ago 10
CSS Question

'flex' CSS overwritten in Woocomerce

I am trying to build a footer within StoreFront. I have written a code snippet to add the HTML

add_action( 'init', 'custom_remove_footer_credit', 10 );
function custom_remove_footer_credit () {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
add_action( 'storefront_footer', 'custom_storefront', 20 );
}
function custom_storefront() {
?>
<div id = "wizfooter" class ="wiz-footer-container">
<div class ="wiz-footer-left">
<p>My HTML 1</p>
</div>
<div class ="wiz-footer-right">
<p>My HTML 2</p>
</div>
</div> <!--wiz-footer-container-->
<?php
}


And I have used the following CSS

.wiz-footer-container {
display: flex;
display: -webkit-flex;
flex-flow: row nowrap;
-webkit-flex-flow: row nowrap;
justify-content: space-around;
-webkit-justify-content: space-around;
}
.wiz-footer-container div {
flex: 1;
-webkit-flex: 1;
width: 400px;
}
.wiz-footer-container div:nth-of-type(1n+2) {
margin-left: 20px;
}


However the display:flex; AND all other Flex properties are overwritten, but the -webkit-display Flex properties are not?

Any ideas? I'm using Chrome and a local server (WAMP)

Answer Source

The are overwritten because they are later in the CSS. To avoid that, put the prefixed version (display:-webkit-flex;) before your non-prefixed version (display:flex;).

See: https://css-tricks.com/ordering-css3-properties/

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:

.wiz-footer-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.wiz-footer-container div {
  -webkit-flex: 1;
  flex: 1;
  width: 400px;
}
.wiz-footer-container div:nth-of-type(1n+2) {
  margin-left: 20px;
}