[Theme: Infoway] Logo not seen correctly on mobile

The way it is right now is not a viable solution, the big logo is inside this class

.container_24 .grid_12 {
	width: 470px;
}

so it’s spilling out, and the reason you see it is because there is no overflow: hidden; assigned.

The right way is to create a child theme and override header.php putting in logo image wrapped in <h1> and link to site url, then apply the responsive image class to it. This way we can even have 2 versions of the logo, one for small screen and one for big screen.

Thanks, Paul. I have no idea how to do that.

I was just using the theme options to upload logo.

I have a section in the template where I can add custom CSS, is there a code to put – show?

Ok, first of all, please go to theme option page and remove the white logo image and use real working logo there. Remove real working logo from the “Top Right Contact Details”, just keep it empty.

Under Custom CSS, put this code in.

/*------ Full width logo fix for infoway theme v 1.2.1------*/
#top.header .grid_12.alpha { margin: 0; width: 100%; }
#top.header .grid_12.omega { display: none; }
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.header .logo { width: 438px; }
}
@media only screen and (max-width: 480px) {
	.header .logo { width: 260px; }
}

This code will work only if theme doesn’t hard crop image uploaded for site logo, I don’t think it does.

Paul,

This worked perfectly. Thank you so much for lending your knowledge – I truly appreciate it.