Modify logo width for tablet and smart phone viewing

• 

  crossfithubtown · Member · Jul 29, 2014 at 2:47 pm

  • Copy link
  • Add topic to favorites

  I am needing to know how to change how my logo appears when I view my website on my iPad or iPhone. The text adjusts to the different size screens but the logo is getting cut off. I asked the WordPress livechat and was told that this required more complex CSS coding and asked that I post my question here. I am using the Mina Olen theme. I’m very new to this and would appreciate any help you could give me. Let me know if you require any further information.

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

• 

  designsimply · Member · Jul 29, 2014 at 5:08 pm

  • Copy link

  Thanks for posting your question in the forums after the chat!

  Since the header image in the Mina Olen theme is setup as a background image, you can use the background-size property to adjust how it is constrained within it’s parent element.

  Here is a page about background-size if you’re interested. I think the Examples section is a good paragraph to look at even if you don’t read the rest:
  https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

  You might also want to take a look at this help page about media queries so you understand how they work:
  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  I took a look at http://crossfithubtown.com/ and came up with an example using both background-size and media queries for you to try out:

  body.custom-header #header {
  	background-size: contain;
  }
  
  @media screen and (max-width: 800px) {
  	body.custom-header #header {
  		min-height: 250px;
  	}
  }
  
  @media screen and (max-width: 500px) {
  	body.custom-header #header {
  		min-height: 180px;
  	}
  }

  The two media queries serve to set up different heights for different screen sizes (also known as break points). I picked those two numbers to target tablet sized devices as well as mobile sized devices, and I also picked what I thought looked best for the header image itself.

  You may adjust any of the max-width and min-height numbers to your liking. Experiment with them to see what you like best.

• 

  crossfithubtown · Member · Jul 29, 2014 at 5:26 pm

  • Copy link

  Thank you so much! I tried it and it seems to be working on my phone. I’ll test it out on my iPad as well. Thanks for the quick feedback!

• 

  crossfithubtown · Member · Jul 29, 2014 at 5:30 pm

  • Copy link

  As a follow up question along the same line, I’m noticing that the media gallery that I have on my home page does not stay centered as I change from pc to tablet to smart phone. Is there any way to keep that appearing centered on the page?

• 

  thesacredpath · Member · Jul 30, 2014 at 12:16 am

  • Copy link

  …as I change from pc to tablet to smart phone. Is there any way to keep that appearing centered on the page?

  Hi, are you talking about the buttons at the bottom of the Customizer? If so, with the image slideshows, after switching to a different size, you sometime have to refresh that page from within the customizer by clicking on the home button.

  If you grab your browser window and narrow it, the slideshow will appear to go outside of the site on the right. Again, just refresh the page. The software does not automatically adjust the width as a browser window is narrowed.

• 

  crossfithubtown · Member · Jul 30, 2014 at 7:07 pm

  • Copy link

  Oh goodness, that was simple!! Thank you for your feedback. This is my first time creating a website so I’m still learning!