Home>Support>Content in header problem

Content in header problem

By Koen, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hello,

We’re having a strange problem. The contact info in our header looks perfect when we’re logged in at the back-end of the website. However when we’re logged out it looks like a mess. There are a lot of unexplainable white spaces and our email en phone number aren’t showing.

This is how it looks when we’re logged in
https://www.dropbox.com/s/rf8n9bv7rtavgy6/Schermafdruk%202015-11-06%2012.12.01.png?dl=0

Can somebody help us to fix this problem?

Thanks!

Kind regards,

Koen Leemans

URL: http://koenrobtest.nl/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Hi Koen

    Thanks for the wait. All seems normal on my side. The header I see in OS X Chrome is the same as your Dropbox screenshot. Any change your side?

    Thanks

  2. 8 years, 10 months ago Koen

    Hi Andrew,

    Thanks for your reaction! I fixed it by using another text widget.

    But I still have a problem with how it looks on mobile devices, it doesn’t stack nicely. Since I wrote this in a text widget en separated the mail info en calling info by using   it doesn’t stack nicely. I tried to divide the info into 3 rows(with page builder) en cut out some top and bottom margin but I couldn’t make it as nicely on desktop as it looks now by using the text widget.

    Do you maybe have a solution for this?

  3. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Sure, at Appearance > Custom CSS try:

    /* Header */

@media (max-width: 680px) {
	#header-sidebar .textwidget p[style] {
		text-align: center !important;
	}
}
  4. 8 years, 10 months ago Koen

    Hi Andrew,

    Thanks again for your reaction. I’ve tried the custom css you gave me. But unfortunately it still looks the same only then centered like this; https://www.dropbox.com/s/6l22xi53uwqdnpc/2015-11-10%2016.11.11.png?dl=0 <https://www.dropbox.com/s/6l22xi53uwqdnpc/2015-11-10%2016.11.11.png?dl=0&gt;

    Is it possible to show the mail info en tel info next to each other on mobile just like it does on desktop?

  5. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    It’ll be much easier to stack everything vertically on mobile. I don’t think there is enough space to get everything on one line.

    It’ll be easiest for me to redo your HTML. Can I login and sort this out quickly? I’ll share the code setup here afterwards.

  6. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:

    [email protected]

    Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.

    Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.

  7. 8 years, 10 months ago Private Message - WordPress

    This is a private message.

  8. 8 years, 10 months ago Koen

    That would be awesome. I’ve send you the details as you asked.

  9. 8 years, 10 months ago Private Message - Andrew Misplon Hi, I Work Here

    This is a private message.

  10. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Original widget moved to the bottom of the page: inactive widget area.

    New Text widget HTML

    <div class="blurb">VRAAG DIRECT EEN <a href="http://koenrobtest.nl/verbeter-scans/" class="blue">GRATIS SCAN</a> AAN</div>
<div class="phone"><a href="href="tel:0612345678"><i class="fa fa-phone"></i> +31(0)6 - 12 34 56 78</a></div>
<div class="email"><a href="mailto:[email protected]"><i class="fa fa-envelope"></i> [email protected]</a></div>

    New CSS:

    /* Header Text */

#header-sidebar .blurb {
  display: block;
  font-size: 12px;
}

#header-sidebar .blurb a,
#header-sidebar .blurb a:hover {
  color: #00a1ff;
}

#header-sidebar .phone,
#header-sidebar .email {
  display: inline-block;
	font-weight: bold;
}

#header-sidebar .phone {
  margin-right: 10px;
}

@media (max-width: 680px) {
	#header-sidebar .phone,
	#header-sidebar .email {
    display: block;
 	}
}

#header-sidebar .phone a,
#header-sidebar .email a,
#header-sidebar .phone a:hover,
#header-sidebar .email a:hover {
	color: #343538;
}

    Main gain is email now splits onto its own line on mobile. You can tweak as required :)

  11. 8 years, 10 months ago Koen

    Andrew, you’re the best. Absolutely love it!

    I’ve put the text aligned right on desktop now. I think it now overrides the custom css code you gave me before about centering the text on mobile devices. If it’s not to much to ask after everything you’ve done for us. Do i need to add something to the code you gave me before?

  12. 8 years, 10 months ago Koen

    I like to center it on mobile because there is a bit of white space after the phone number. so it looks like it doesn’t align fully to the right. If it’s easier to fix that please let me know

  13. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Glad that helps :)

    We have all the necessary markup and CSS in place so it’s not necessary to use inline styles. Please, remove the inline styles added. To align right on desktop just change the following rule:

    This:

    #header-sidebar .blurb {
  display: block;
  font-size: 12px;
}

    Changes to:

    #header-sidebar .blurb {
  display: block;
  font-size: 12px;
  text-align: right;
}

    Do the same for the other selectors:

    #header-sidebar .phone,
#header-sidebar .email {
	display: inline-block;
	font-weight: bold;
	text-align: right;
}
  14. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Then change our media query.

    Now it is:

    @media (max-width: 680px) {
	#header-sidebar .phone,
	#header-sidebar .email {
    display: block;
 	}
}

    Change it to:

    @media (max-width: 680px) {
	#header-sidebar .blurb {
		text-align: center;
	}
	#header-sidebar .phone,
	#header-sidebar .email {
    	display: block;
    	text-align: center;
 	}
}
  15. 8 years, 10 months ago Koen

    Andrew, thanks again! It looks great!

  16. 8 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Super :) Glad to hear that helped.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More