logo header on mobile

• 

  mjk1450 · Member · Dec 9, 2014 at 9:30 pm

  • Copy link
  • Add topic to favorites

  I am trying to get the website to appear the same on a mobile device as is on desktop. On iphone though, the logo header (660×102) is displayed across the screen but the two column page has narrowed down to a single column and pushed to the left, not filling the whole page. When I view it in mobile view, the logo is missing and it’s just the title, no image.

  The website uses Misty Lake theme that ‘s been upgraded. Mobile theme has been enabled and the following css code has been added at the end.

  .mobile-theme .site-title a {
  display: block;
  background: url(‘https://chemometrix.files.wordpress.com/2014/11/header-logo-image-e1416617870489.png’) no-repeat;
  text-align: left;
  }

  On the mobile in full website view, how can I get the page to fill out and not display in a thin single column? And in mobile view, how do I get the logo to appear? I do not know much about css.

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

• 

  thesacredpath · Member · Dec 26, 2014 at 4:32 pm

  • Copy link

  Hi there, and I see you posted this on Dec 9, so sorry for the delay in answering. It had not popped up in my unanswered list.

  Did you perhaps have the Mobile theme activated at Appearance > Mobile? I see you now have it turned off and when I view your site on my iPhone and iPad, everything looks correct.

  On responsive designed themes, the layout of the page changes for smaller devices. On Misty Lake, the sidebar moves down below the content at 600px width. That is so your content can be presented prominently on smaller screens. If the sidebar stayed to the right below 600px, your content column would get very narrow and difficult to read.

  For your header/logo image, if you wish it to show fully on smaller devices, change the width to “max-width” and add a background-size: contain declarations to .site-title a in your custom CSS so it looks like this.

  .site-title a {
      background: url("//chemometrix.files.wordpress.com/2014/11/header-logo-image-e1416617870489.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      display: block;
      height: 115px;
      text-align: left;
      max-width: 900px;
      background-size: contain;
  }

  See how you like that.