mobile site looks good, desktop does not

• 

  breadbarley · Member · Feb 8, 2014 at 3:14 am

  • Copy link
  • Add topic to favorites

  Hello,
  Maybe someone can help. I am using the Hatch theme and I am having issues with how the page loads on different devices.

  Basically I have been trying to enlarge my logo, so it acts as a header and a link to my home page on every page. Hatch does not allow for the header to be visible on every page and it is difficult to try and make a header into a link as far as I can tell.

  Now, I was able to get the logo to look at it’s actual size (940 x 360) while editing it in css with this line added on to my stylesheet:
  #masthead .logo {
  margin: 0 0 1em;
  width: 100%;
  }

  It looks right at my admin customize screen and on a mobile device or a tablet, but I’ve checked on safari, firefox, and Internet explorer so far and it looks like it keeps resizing.

  Does anyone know what I can add on to fix this?
  Thank you very much for your help, in advance.

  The blog I need help with is halfnakedfrankenstein.com.

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

• 

  thesacredpath · Member · Feb 8, 2014 at 4:20 am

  • Copy link

  Hi, #masthead hgroup is set to a 35% width. Add the following and your logo will then go full-width and the menu will drop down below it.

  #masthead hgroup {
  width: 100%;
  }

• 

  breadbarley · Member · Feb 8, 2014 at 5:10 am

  • Copy link

  Wonderful! Thank you for the help. I didn’t think of that.
  I really appreciate it…it looks perfect now.

• 

  thesacredpath · Member · Feb 8, 2014 at 6:32 pm

  • Copy link

  You are welcome.