Logo gets cropped

[wemakestuff]

Hi there,

When I upload my logo it gets cropped whenever I make the safari screen smaller. I want to change the top left corner bigger where my logo is in but I don’t know how to do this.

Hope you can help!

Thanks

[Musama]

Hi check this thread https://forum.focuxtheme.com /topic/how-do-i-modify-the-mobile-version-of-the-logo/

[FocuxTheme Support]

Hi, you’d better post your website link? I wanna figure out whether it’s mobile logo or side logo in smaller window.
Thanks!

[wemakestuff]

Hi! Thanks for your reply. It’s not the mobile version, it’s actually the desktop version where I’m having problems with. This is the site: http://www.wemakestuffcollective.com

thanks for your help!!

[wemakestuff]

PS: problem occurs when i make the window smaller.

[FocuxTheme Support]

Hi

I found you have changed the height of lOGO container to 200px in layout.css, You also need to change the height in responsive.css for the smaller window.
you will find the following css in responsive.css

#sidebar .logo a{
		background-size:100% auto;
		width: 220px;
		height: 66px;
	}

just change the height to 200px.

However, the best way is that don’t edit any css file(layout.css and responsive.css), because it will influence the smooth update in the future ,
so you can put the following css to custom.css or “OldCar options > Custom codes > Custom CSS”

h1.logo,h1.logo a{
  width: 200px;
  height:200px;
}
@media all and (max-width: 1349px){	
	#sidebar .logo a{
		background-size:100% auto;
		width: 220px;
		height: 200px;
	}
}

Also, I will improve this issue in next version and make the height of LOGO container auto increase.

Thanks!

[wemakestuff]

Wow! Thank you so much for all of your help!!

I’ve copied the code in the Custom CSS. However, when I make the window smaller it still crops the logo… Any chance there’s an extra code for having the logo 100% visible when making the window smaller? So with other words, would it be possible to have the logo scaled with the window when making it smaller?

[wemakestuff]

PS: when viewing the website on an iPad in Landscape-view, the logo is also cropped.
But viewing it in Portrait-view the logo is scaled smaller. This is exactly how i would like to have it in iPad Landscape- and Desktop-views.

[Musama]

you have to set a mobile logo go to OldCar Options > general settings & set a mobile logo then set a Retina(HiDPI) LOGO (is the double size of the mobile logo). Thanks

[Musama]

it’s recomended to respect the max size for mobile logo 140X40px & Retina size will be the double 280X80px. Good Luck

[wemakestuff]

Well, our logo isn’t that size or aspect ratio. It’s higher than the sizes you have given me and I was wondering if there would be a code to not crop the logo.

Hope you or the Keymaster have an answer.

Thank you.

[Musama]

i see the problem here is if you resized the logo you have to resize the header height so that’s will look ugly the best practice i recomand is that you write only text “We make stuff” in the mobile version logo thats what the majority of people do. Hope this will be helpful

[FocuxTheme Support]

Hi, @wemakestuff

I have tested the custom CSS again. please try the following CSS

h1.logo,h1.logo a{
  width: 200px;
  height: 200px;
}
@media all and (max-width: 1349px){ 
    #sidebar .logo a{
        width: 200px;
        height: 200px;
	background-size:auto 200px;
    }
}

Also, on mobile phone, the height of your responsive LOGO is too high so that if you want it not cropped, you have to increase the height of responsive top bar. I’m not suggest you to do that, because the top bar is too high so that it will hide more space, if you put the following CSS to the custom CSS field, you will see the result.

.responsive-header{height:160px;}
.responsive-logo {height:140px;}

So the recommended method is reduce the logo height or use the other simplify LOGO for the responsive LOGO.

[wemakestuff]

Thank you very much for the codes! They work.

The only thing now is that the header from my pages gets cropped when I drag the window smaller. Should I play with the header sizes now instead?

Thank you.

[Musama]

don’t worry this size is accessible by all major mobiles

[wemakestuff]

Well, actually not only it crops on my mobile but also in the desktop version when I drag the window smaller.

[FocuxTheme Support]

Can you post your website link? I will check it with firebug.

[wemakestuff]

this is the website: http://www.wemakestuffcollective.com

thanks!

[FocuxTheme Support]

Sorry, I have checked your website and I’m not quite understand that which part of the header is gets cropped? Can you send a screenshot and sign out the problem?

[Author]

Posts