Estate Template: Edit Distance Between Mail Icon And Legend/text - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer
Back to the questions

Estate Template: Edit Distance Between Mail Icon And Legend/text

M

Mon

Template 4 years ago

Where can I edit this https://prnt.sc/10zb1zu how can I make a distance between the 'mail' icon and the legend/text '[email protected]', in the same way that there is a space between the phone icon and the number to dial.

I've tried with classes in the .css files and I can't find the way!

Thanks!

0
4 Answers
Order by
Oldest Newest Votes
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 4 years ago #12351

Hello there,

Please, add this custom CSS. 

.estate-top-login .info-text .sppb-btn i.fa {
    margin-right: 2px !important;
}
.sp-contact-info .sp-contact-phone span.fa {
    margin-right: 2px !important;
}

Your issue will be fixed hopefully.

0
M
Mon
Accepted Answer
4 years ago #13100

This is the css file from lines 4399 to 4444. I've added the lines you told me (code added in between), and nothing happens https://prnt.sc/114zid7. What am I doing wrong?

}
  #sp-menu-right {
    font-size: 13px;
  }
  #sp-menu-right > .sp-column > div:not(:last-child) {
    margin-left: 30px;
  }
  #sp-menu-right .sp-contact-info .sp-contact-phone span.fa {
    font-size: 15px;
    margin-right: 10px;
  }
  #sp-menu-right .estate-top-login .info-text .sppb-btn {
    font-size: 13px;
  }
  #sp-menu-right .estate-top-login .info-text .sppb-btn i.fa {
    font-size: 15px;
    margin-right: 10px;
  }
.estate-top-login .info-text .sppb-btn i.fa {
    margin-right: 2px !important;
    }
  .sp-contact-info .sp-contact-phone span.fa {
    margin-right: 2px !important;
    }
 .sp-property-properties-full-width > .row > div {
    width: 33.333333%;
  }
  .com-spproperty.view-property .spproperty-overview-list > div:not(:last-child) {
    margin-right: 25px;
  }
  #sp-menu-right, #sp-menu-right .estate-top-login .info-text .sppb-btn {
    font-size: 12px;
  }
  #sp-menu-right .estate-top-login .info-text .sppb-btn i.fa, .sp-contact-info .sp-contact-phone span.fa {
    font-size: 15px;
    margin-right: 10px;
  }
  .spproperty-map-top .sp-property-search .spproperty-search .cat-wrap .pstatus .sp-select {
    font-size: 14px;
    padding: 30px 11px;
  }
  .spproperty-map-top .sp-property-search .spproperty-search .property-search-button-wrap .property-search-button {
    width: 145px;
  }
0
Muntasir Sakib
Muntasir Sakib
Accepted Answer
Support Agent 4 years ago #13148

Hello there,

I told you to use the code in Custom CSS, not in the CSS file. Remove the code from the CSS files, and use it in the Custom CSS section inside Template Options settings.

Thanks!

0
M
Mon
Accepted Answer
4 years ago #13234

Great, Thanks! Sorry for the misunderstanding!

Works fine for the phone icon, but I'd need a little space between the envelope icon and email address. They are too close together. Here: https://prnt.sc/115ual6

Best regards,

0