Make logo bigger

Hi –

I’ll be glad to take a look. Sounds like we just need to set some mobile parameters in the CSS. Please specify if it is the church logo or the one at the top of the site in the header, with your name, that needs adjusted.

thank you so much, @lizakarkoski. I appreciate your willingness to help. I think I may have figured it out doing just what you said (it’s the logo at the top of the page).

Hi @lizakarkoski and others,
I’m still having trouble getting the logo to be a bit bigger at small sizes (less than 800px width. I’ve added

@media screen and (min-width: 400px) and (max-width:800px) {
	.site-logo-link .site-logo {
		width:300px;
		height:52px;
	}

to the custom stylesheet, but it doesn’t seem to be registering. Am I doing something wrong?
Thanks again,
Elisabeth

Try it with just the (max-width :800px) and remove the minimum width component. Let me know.

Thanks so much again. That seems to be on its way to working, though only the height seems to be applied (though the width is showing up in the inspector, I’m not sure why it’s not applying)

This is my code:

/* logo size */
@media screen and (min-width: 1050px) {
	.site-logo-link .site-logo {
		width:400px;
		height:69px;
	}
}
@media screen and (min-width: 930px) and (max-width: 1050px) {
	.site-logo-link .site-logo {
		width:350px;
		height:61px;
	}
}
@media screen and (max-width: 930px) {
	.site-logo-link .site-logo {
		width:300px;
		height:52px;
	}
}

Ok, I just changed the height/width to min-height and min-width, and that seemed to work! Do you see any issues with using that property?

@media screen and (max-width: 930px) {
	.site-logo-link .site-logo {
		min-height:52px;
		min-width:300px;
	}
}

No issues ?? way to go getting that figured out too!