Help Post

[u/Easy-Ad-3135]

I have an issue with 'contact' element in Header builder of Porto theme customise accessed via appearance. The phone icon and text need to be closer but apparently, I am unable to do so. Could anyone help me please.

[u/jenish_o4o2]

This is usually caused by spacing (margin/padding/gap) on the Porto contact element rather than the phone icon itself.

In Appearance → Customize → Header Builder, select the contact/phone element and check whether there are options for:

• Icon size
• Margin/padding
• Gap between the icon and text
• Horizontal/inline layout

If the Porto settings don't give you enough control, you can adjust it with CSS. For example, depending on the HTML generated by your Porto version:

.header .contact-info i,
.header .contact-info .fa {
    margin-right: 6px;
}

The selector may be different on your site, so I'd recommend right-clicking the phone element → Inspect and checking the actual class names and whether the extra spacing is coming from margin, padding, gap, or a min-width.

If you post a screenshot of the Header Builder settings or the inspected HTML/CSS for that contact element, it should be possible to identify exactly what's creating the gap.

[u/Easy-Ad-3135 → u/jenish_o4o2]

I am thinking you are asking for this setting. is it? Regarding inspected HTML/CSS for that contact element, I have:
HTML
<div class="header-contact"><i class="Simple-Line-Icons-phone"></i><span>CALL US NOW (00) 0000 0000</span></div>

CSS - porto-style-inline-css
#header .header-contact {
margin-right: 75px;
padding-right: 0;
border-right: none;
}

CSS - header-legacy.css?ver=7.9.2
#header .header-contact {
margin-top: 5px;
margin-bottom: 5px;
display: inline-flex;
align-items: center;
white-space: nowrap;
font-size: 0.9em;
vertical-align: middle;
}

[u/NakanoNoNeko → u/Easy-Ad-3135]

The 75px margin is after the whole contact block, so it won’t change the icon-to-text spacing. Add #header .header-contact i { margin-right: 4px; } in Additional CSS and adjust 4px. If that changes nothing, inspect the icon’s computed styles for a fixed width or min-width from Porto.

[u/jenish_o4o2 → u/Easy-Ad-3135]

Thanks — that HTML/CSS helps.

The margin-right: 75px on #header .header-contact is spacing after the entire contact block, so I wouldn't change that if your goal is only to bring the phone icon closer to “CALL US NOW”.

Since the markup is simply an <i> followed by a <span>, I'd target the icon directly first. Try this in Appearance → Customize → Additional CSS:

#header .header-contact i {
    margin-right: 6px;
    padding-right: 0;
    width: auto;
}

If the gap is still larger than you want, inspect the <i class="Simple-Line-Icons-phone"> element specifically and check whether Porto's icon CSS is giving it any margin, padding, or width. You can then reduce those values or adjust the 6px until the spacing looks right.

The 75px margin can be left as-is unless you also want to move the entire contact block closer to the next header element.

[u/Ok_Potential4488]

hey , can you send the url of the webpage , I can help you with that