Woocommerce Account Page Style -

style.css

/*CSS style for a nicer Woocommerce Account Page than the default one -*/
/*Note - although this is general WooCommerce styling there is a line of code which it's specific to X-theme */

.woocommerce-MyAccount-content{
  color:rgb(13, 30, 50);
}
.woocommerce-MyAccount-content strong{
  text-transform:capitalize;
}
.woocommerce-account h2{
  font-size:48px;
}
/*Media rule - desktop and devices bigger than 480px*/
@media (min-width:481px){
.woocommerce-MyAccount-navigation-link{
  display:block;
 
}
  
.woocommerce-MyAccount-navigation{
  width:25%;
  float:left;
  margin-right:10px;
  
}

.woocommerce-MyAccount-navigation-link a{
  padding:12px;
  text-align:left;
  color:#0D1E32;
  font-size:.9em;
  background-color:rgba(221, 194, 143,0.2);
  margin-top:0;
  margin-right:10px;
    
}
.woocommerce-MyAccount-navigation-link a:hover{
  color:black;
  text-decoration:underline;
}

.woocommerce-MyAccount-navigation-link a:before{
  border:none;
  border-bottom:1px solid rgb(221, 194, 143);
}

.woocommerce-MyAccount-content{
    width: 70%;    
    float: right;
}

}

/**=====Icons====**/
  
.woocommerce-MyAccount-navigation-link:before{
font-family: FontAwesome;
margin:3px 5px 0px 0px;
float:left;
padding: 2px 10px;
font-size:16px;
color:rgb(13, 30, 50);
}
.woocommerce-MyAccount-navigation-link--dashboard:before{
content:"\f0e4";
z-index:10;
}
.woocommerce-MyAccount-navigation-link--orders:before{
content:"\f07a";
}
.woocommerce-MyAccount-navigation-link--downloads:before{
content:"\f019";
}
.woocommerce-MyAccount-navigation-link--edit-address:before{
content:"\f2bb";
}
.woocommerce-MyAccount-navigation-link--payment-methods:before{
content:"\f283";
}
.woocommerce-MyAccount-navigation-link--edit-account:before{
content:"\f007";
}
.woocommerce-MyAccount-navigation-link--appointments:before{
content:"\f073";
}
.woocommerce-MyAccount-navigation-link--customer-logout:before{
content:"\f08b";
}


/*responsive*/
@media(max-width:980px){
  .emtpy-column{
    display:none;
  }
  .woocommerce-MyAccount-content{
    width: 70%;    
    float: right;
}
/*specific to X-Theme */
  .x-column.x-2-3{
    width:100%;
  }
}

@media (max-width:480px){
  .woocommerce-MyAccount-content{
    width:100%;
  }
  .woocommerce-MyAccount-navigation ul{
     margin-top:-5px;
  }
  .woocommerce-MyAccount-navigation-link a{
  padding:10px 7px;
  text-align:center;
  color:#0D1E32;
  font-size:.7em;
    font-weight:700;
  background-color:rgba(221, 194, 143,0.2);

  border-radius:0 !important;  
  }
  .woocommerce-MyAccount-navigation-link a::before{
    border-radius:0;
  }
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard,
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--orders,
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-address,
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--payment-methods,
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-account, 
  .woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout{
    width:32%;;
  }
  .woocommerce-account h2{
    font-size:36px;
    border-bottom:2px solid rgb(13, 30, 50);
  }
}