In some instances, the social media and payment option icons in the footer of your website may display vertically in error. Here's an example:



This issue may be caused by a Divi theme update. Clearing your website/server cache after updating Divi may resolve the problem.


However, if the vertical icon stacking issue persists, the following CSS code is known to fix the problem:


1. Navigate to Admin Dashboard > Appearance > Theme Editor > style.css (Divi 5 Star Hotel).


2. In your child theme stylesheet, navigate to LINE 248. You're looking for two sections, called "FOOTER SOCIAL ICONS STYLING" and "FOOTER CREDIT CARD ICONS STYLING".



3. If your child theme has been modified, these sections may start on a different LINE. If that's the case, inside the stylesheet you can search for the above quoted text using Ctrl+F on your keyboard.


4. Replace both "FOOTER SOCIAL ICONS STYLING" and "FOOTER CREDIT CARD ICONS STYLING" sections with the following CSS code:


/* FOOTER SOCIAL ICONS STYLING */
.footer-social-icons .et_pb_blurb_content .et_pb_main_blurb_image {
  width: 20% !important;
  margin: 15px 0px !important;
  padding: 15px 0px !important;
  float: left;
}
.footer-social-icons .et_pb_blurb_content {
  display: inline !important;
}

/* FOOTER CREDIT CARD ICONS STYLING */
.footer-credit-card-icons .et_pb_blurb_content .et_pb_main_blurb_image {
  width: 16.66% !important;
  float: left;
}
.footer-credit-card-icons .et_pb_blurb_content {
  display: inline !important;
}


Note: This CSS update adds "display: inline" code to each set of footer icons. The "important" tag also ensures correct display on custom post pages created with our 5 Star Services plugin.


If you're still running into footer icon display issues after following this article, please don't hesitate to create a support ticket, and one of our team will follow-up with you.