Logo Quality / Fixed Bar

Hi Command

I’m sure I can get these challenges sorted. Could you perhaps send your site link so I can take a look. Please let me know which page I can see the banner on. You can use the private reply checkbox below the comment field to keep your site URL private.

Thanks

This reply has been marked as private.

Thanks.

A friendly reminder that all WordPress.org themes completely overwrite their own folder during theme updates. Any changes made via Appearance > Editor to the parent theme will be lost on theme update if an update is ever run.

Go to Appearance > Editor > style.css and search for:

.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
  font-size: 1.78571em;
  line-height: 2em;
  margin: 0;
  text-align: center;
  margin-left: 4.5cm;
}

The following line has been added, please remove it for now:

margin-left: 4.5cm;

If you don’t have a Custom CSS plugin, try installing one called SiteOrigin CSS from Plugins > Add New. Once activated go to Appearance > Custom CSS and insert:

/* Content Heading */

.single .entry-header h1.entry-title, .page .site-content > .entry-header h1.entry-title, .blog .page-header h1.page-title, .search-results .page-header h1.page-title, .search-no-results .page-header h1.page-title, .error404 .page-header h1.page-title {
    width: 100%;
    text-align: center;
}

This should resolve the banner issue. I’ll come back to you on the logo shortly.

I ran a quick diff comparison on your stylesheet. The above rule is the only one edited so after this we’ll be update safe.

For the logo, perhaps try uploading this version as your main logo.

https://purothemes.com/wp-content/uploads/2015/10/command-security-logo-184h.png

Let me know if that makes any difference.

I think the problem on regular resolutions might just be that the logo text doesn’t render well at that size. We can next look at enlarging the header to accommodate it.

This reply has been marked as private.

Thank you greatly! That version of the logo worked!

Glad to hear that helped.

For the banner, go to Appearance > Editor > style.css, locate these two lines:

text-align: center;
margin-left: 4.5cm;

and remove them.

This reply has been marked as private.

Thanks for your feedback. At Appearance > Editor > style.css. Try searching for:

/*--------------------------------------------------------------
13.6.3 - General Post and Page Header
--------------------------------------------------------------*/

Underneath that you’ll find:

.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
  font-size: 1.78571em;
  line-height: 2em;
  margin: 0;
  text-align: center;
  margin-left: 4.5cm;
}

The two lines we need to remove are:

  text-align: center;
  margin-left: 4.5cm;

The left margin is the main issue.

(If at all possible, could we perhaps save “private reply” for passwords and URLS etc. That way the thread might be helpful to others. You’re a premium user so we could also move to email if you ever wanted. Thanks for your consideration).

Absolutely!

I checked that location and this is what is showing up for me.

/*————————————————————–
13.6.3 – General Post and Page Header
————————————————————–*/
.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
font-size: 1.78571em;
line-height: 2em;
margin: 0;
text-align: center;
}

Thanks 🙂

Apologies, that was a caching issue on my side. Thanks for double-checking.

We can now try the following in Custom CSS:

.single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: center center !important;
}

@media (max-width: 1280px) {
	.page .site-content > .entry-header {
		padding: 1em 0;
	}
}

Managing the padding for mobile gets tricky. See what you think. I tried to reduce it a bit, you could reduce it more. It’s the last value there. 1em.

That code worked perfectly for the desktop site the mobile however shows up as more of a black rectangle box with the image inside of it. I attempted to change the number in front of “em” which had little success in changing the appearance of the box.
Andrew you’ve been so helpful, it is greatly appreciated.

Glad to hear we’re making progress. We can try add another media query like this:

@media (max-width: 480px) {
	.page .site-content > .entry-header {
		padding: 6px 0;
	}
}

OR we could drop the background image for mobile. If you wanted to that we’d say:

@media (max-width: 680px) {
	.single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
		background-image: none !important;
	}	
}

So I opted for the first code and it appears that it somewhat worked. I am viewing the mobile site through an iPhone 6 Plus so that may have something to do with it however, on my screen the bar is correctly sized under the “contact” and “services” tab but not under the about tab.