Mobile view for Misty Lake Theme

• 

  mjk1450 · Member · Sep 10, 2021 at 3:12 pm

  • Copy link
  • Add topic to favorites

  Under Appearance, Customize, when I click on mobile view, it shows as it should but on my phone, the site is narrowed to the left of the screen. The header shows across the full screen but the rest of the site is not. Here is what I have for css.
  
  @media
  only screen and (max-width: 600px),(min-device-width: 768px) and (max-device-width: 1024px) {
  .site-title a {
  display: block;
  border-top: none #ffffff;
  background: url(‘//chemometrix.files.wordpress.com/2014/12/mobile-logo-e1418273344931.png’) no-repeat;
  text-align: left;
  }

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

• 

  supernovia · Staff · Sep 11, 2021 at 12:33 am

  • Copy link

  Hi! Actually right at the top of the CSS, I see the issue:

  .site-title a {
  	display: block;
  	width: 900px; /* it's this */
  	max-width: 100%; /* adding this should address it, unless you want to put the 900px thing in a media query instead */
  	background-size: contain; /* this should shrink your header image to fit */
  	height: 115px;
  	background: url('https://chemometrix.files.wordpress.com/2015/02/header-logo-image-e1423086493443.png') no-repeat;
  	text-align: left;
  }

  Want to try that? It’s a bit outside the scope of our CSS support, so if that isn’t it I’d recommend a bit more digging, but I think that should take you in the right direction at least.

• 

  mjk1450 · Member · Sep 13, 2021 at 2:52 pm

  • Copy link

  Thank you for the correction! It worked well and solved the issue. I appreciate the support.