[Ying-Fu LiParticipant]

Hi,

On this site: http://dehartenvriend.nl I have put two phone numbers in the topbar. I have also used ‘ ‘ to add space between them. Now, when switching to mobile phone view the numbers are placed underneath each other but don’t align because of those ‘ ‘. Is there a runaround for this?

[ChristopherModerator]

Hi there,

Please update your code to :

<div class="x-column x-1-3 x-sm"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/netherlands-flag-xs.png">&nbsp; &nbsp; &nbsp;0909 - 2356666 (€ 0,90)
</div>
<div class="x-column x-1-3 x-sm">
&nbsp; &nbsp; &nbsp;<img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/belgium-flag-xs.png">&nbsp; &nbsp; &nbsp;0909 - 2356666 (€ 1,15)</div>

Hope it helps.

[Ying-Fu LiParticipant]

That messes up the desktop view as well.

[ChristopherModerator]

Hi there,

Please update topbar content to :

<span style="display: inline-block;"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/netherlands-flag-xs.png">&nbsp; &nbsp; &nbsp;0909 - 5553555  (€ 0,90)</span>
<span style="display: inline-block;">&nbsp; &nbsp; &nbsp;<img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/belgium-flag-xs.png">&nbsp; &nbsp; &nbsp;02 - 5884961 (€ 1,15)</span>

Hope it helps.

[Ying-Fu LiParticipant]

Nope, it is the spaces (&nbsp) that cause it.

[Ying-Fu LiParticipant]

I put the (&nbsp)’s behind the first phone number which works for the mobile phone view, but not for the tablet view.

[Ying-Fu LiParticipant]

Okay, so now it doesn’t work on any screen size.

[JoaoModerator]

Hi There,

Add this code to Appereance > Customizer > Header > Topobar Content:

<span style="display: inline-block;"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/netherlands-flag-xs.png">&nbsp; &nbsp; &nbsp;0909 - 5553555  (€ 0,90)</span>
<span class="span2" style="display: inline-block;"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/belgium-flag-xs.png">&nbsp; &nbsp; &nbsp;02 - 5884961 (€ 1,15)</span>

Add this code to Appereance > Customizer > Custom > CSS

@media(min-width: 480px) {
span.span2 {
  
  padding-left: 20px;
  } }
@media(max-width: 767px) {
span.span2 {
  
  margin-top: 10px;
  } }

@media (max-width: 767px) {
.x-topbar .p-info {
    text-align: left !important;
    margin-left: 10%;
} }

Adjust margin-left if necessary.

Hope it helps

Joao

[Ying-Fu LiParticipant]

I’ll check it next thing in the morning.

Another issue: the flag icon and the phone numbers don’t align correctly. The flag is positioned slightly lower than the text. How can I fix that?

[JadeModerator]

Hi there,

Please add this code in the customizer:

.x-topbar .p-info span img {
    position: relative;
    top: -5px;
}

[Ying-Fu LiParticipant]

You guys rock!

[DarshanaModerator]

Glad we were able to help 🙂

[Ying-Fu LiParticipant]

Hi,

Adjusted that last bit of code to ‘top: -3px’. But… while it looks perfect in Safari it doesn’t look so great in Firefox, where I’d have to use ‘-10px’ to get anything aligned (but then it is too much in Safari…). Any suggestions as to why this is and how to prevent it?

Love you guys!

[Rue NelModerator]

Hello There,

After further investigation, it appears that you have inserted an invalid code in your topbar content. Please do update it and make use of this code instead:

<span style="display: inline-block;"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/netherlands-flag-xs.png">     0909 - 5553555  (€ 0,90pm)</span>
 <span class="span2" style="display: inline-block;"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/belgium-flag-xs.png">     02 - 5884961 (€ 1,15pm)</span>
   <span class="span2" style="display: inline-block;"><a href="http://dehartenvriend.nl/credits/"><img src="http://dehartenvriend.nl/wp-content/uploads/2016/09/credits-flag-xs.png">     KOOP CREDITS</a></span>

Please let us know how it goes.

[Ying-Fu LiParticipant]

Okay, done but that didn’t change how it looks in Firefox. Checked Safari and Chrome and both look okay, just not Firefox.

[Author]

Posts