Resizing Header Logo inSync

To get it centered on mobile, add this in your Responsive section in the CSS –

.header-image .site-title a {
    background-position: center !important;
    float: none;
}

You can start by adding it under the section labeled –

@media only screen and (max-width: 767px)

and see if that works best.

Yep, that’s it!

Add your link to the showcase forum whenever it’s ready – https://appfinite.com/forum/showcase/

@ctovani If you take a look around line 3173 in your CSS you’ll see this –

	.sidebar-primary,
	.title-area {
		 width: 300px;
	}

When the browser is resized to 1180px the code above makes the width 300px. Since your logo is larger than that you could actually remove that code or separate the .sidebar-primary and the title-area so the sidebar and title-area (logo) aren’t both affected by the same code. Try editing it like this –

	.sidebar-primary {
		 width: 300px;
	}

	.title-area {
		 width: 520px;
	}

The second thing I would recommend you do is add some code to make your logo a bit more responsive and adjust on smaller devices so it doesn’t cut off. If you look in the iPads (portrait) section of the Responsive Area (line 3205) you can add the following code –

.header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
}

That will also make your logo align in the Center as well.

Let me know if this helps or if you need assistance adding this code in.

@Russell Check my reply here – https://appfinite.com/topic/header-height-expanded-when-added-site-header-logo-insync/