Solved: Help resizing a logo for mobile view - please! :)

Jo79 · ‎01-14-2019

Hello! 🙂

I know there are some weebly users who are awesome at CSS. I am a total newb, and I would be deeply grateful if someone can help me!

I resized the logo in my theme (using a CSS hack I read in the community) because it was too small to be readable, but now on mobile view the whole thing doesn't fit on the screen. It appears partially cut off.

I've tried resizing it various ways, but it seems that if I make it small enough for the mobile view, it's too small for the PC view.

What I'd really love to do is make it shrink to fit for the mobile version. Is there a way to do that?

The theme I'm using is Upstart. You can view it at: https://mmtemp88.weebly.com/

All help will be so very appreciated!

Thank you,

Jo S.

Adam7 · ‎01-15-2019

Try using this in Settings > SEO > Header Code, @Jo79:

<style>
	@media screen and (max-width: 767px)
	{
		.header-wrap #logo img
		{
			max-width:200px !important;
		}
	}
</style>

View Best Answer >

Adam7 · ‎01-15-2019

Try using this in Settings > SEO > Header Code, @Jo79:

<style>
	@media screen and (max-width: 767px)
	{
		.header-wrap #logo img
		{
			max-width:200px !important;
		}
	}
</style>

Jo79 · ‎01-15-2019

@Adam - That worked! Thank you, thank you, thank you!!!

Zach_F · ‎10-18-2019

Adam,

I'm having the same issue with my theme: Clean Lines - Business. I just don't know how to properly target the logo in css. Here's the html leading up to it:

<body class="header-page">
	<div class="body-wrap">
		<div id="header">
			<div class="nav-trigger hamburger">
				<div class="open-btn">
					<span class="mobile"></span>
					<span class="mobile"></span>
					<span class="mobile"></span>
				</div>
			</div>
			<div id="navbar">
				<div>
					<a href="#default" id="sitename">{logo}</a>
				</div>

I haven't had this problem before so I wasn't sure how to approach it. Please help!

Bernadette3 · ‎10-18-2019

Hi @Zach_F If you are posting for some advice on code it's best to also include a link to your live site. Thanks!

Zach_F · ‎10-18-2019

www.giltnertransportation.com

It's live, but obviously newly under construction, so please ignore the bareness!

Bernadette3 · ‎10-19-2019

Looks like it's password protected. Also, don't worry if your site is a work in progress! Nobody on here is expecting to come across a perfectly polished website.

kold66 · ‎11-10-2020

I am having this same problem. When I look at the mobile view my logo is extremely small. I need to make this larger. I am using the Clean lines - Business theme. Here is my live site. https://galenalodge.weebly.com/

Adam7 · ‎11-11-2020

Thanks for your post, @kold66. Can you take a screenshot of what you see on your mobile device? I checked on my iPhone 11 Pro max and your logo isn't too small to me, but it might look different on different devices.