Resizing logo

• 

  mkhanna5 · Member · Dec 28, 2016 at 1:43 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I am trying to make my logo look a bit bigger. Can someone help me with the code so that it does not get distorted on desktop and mobile devices?

  The theme is pique.

  Thanks so much!

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Dec 28, 2016 at 5:17 pm

  • Copy link

  You could try something like this to double the height on larger screens, leaving the default size on small devices:

  @media (min-width: 600px) {
  	.site-branding .site-logo-link img {
  	    height: 200px;
  	}
  }

  You can adjust either number as you like.

• 

  mkhanna5 · Member · Dec 28, 2016 at 5:27 pm

  • Copy link

  Thanks kathrynwp! It looks fine on the larger screen now, as well as on mobile (horizontal layout). It’s still quite small in the vertical mode in mobile. Is there anything we can do about that?

• 

  kathrynwp · Staff · Dec 28, 2016 at 5:31 pm

  • Copy link

  You can use another media query to target smaller sizes. Here’s a good place to start learning about media queries:

  https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  For example, this would target screens smaller than what you secified earlier:

  @media (max-width: 599px) {
  	.site-branding .site-logo-link img {
  	    height: XXXpx;
  	}
  }

  Replace XXX with your desired logo height for screens up to 599px.

• 

  mkhanna5 · Member · Dec 28, 2016 at 6:10 pm

  • Copy link

  Hi Kathrynwp! I suspect there might be a bug in the theme. In mobile, the menu bar overlaps the one liner ‘Giving maths class a makeover’. It’s acting a bit odd. Sometimes it overlaps and sometimes not. I can’t figure out what’s driving it. Any suggestions?

• 

  kathrynwp · Staff · Dec 28, 2016 at 8:30 pm

  • Copy link

  Looks like you can only go to about 80px high for the logo on small screens before the overlap happens. Anything bigger and it starts to push the menu down into that line of text. Try this instead of the earlier media query:

  @media (max-width: 599px) {
  	.site-branding .site-logo-link img {
  		height: 80px;
  	}
  }