Pictorico – header doesn't display correctly on mobile

• 

  camerashootrepeat · Member · Jan 23, 2015 at 11:08 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am happy with how my header ‘CAMERA|SHOOT|REPEAT’ appears on desktop. However, when viewed on a mobile, the header wraps and becomes ilegible

  I do not like the Pictorico mobile theme and therefore have this disabled.

  Is there a way that I can make the header resize so that it sits neatly, in the top left, on one line, when viewing on a mobile device?

  Many thanks,
  Megan

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

• 

  staff-happychia · Staff · Jan 24, 2015 at 9:53 am

  • Copy link

  You have a style for site branding that is setting the max width to 35% but since there is no media query this style is applied to all (desktop, mobile and tablet) the screens.

  To restrict this change only to desktop, lets modify the rule to apply only to the screens that are at least 800px wide.

  @media screen and (min-width: 800px) {
  .site-branding {
      max-width: 35%
  }
  }

  This means for smaller screens the theme default style kicks off and shows the title just fine.

  There is also a left margin of 15 px on the site title which is pushing the last T of ‘CAMERA|SHOOT|REPEAT’ to behind the menu (hamburger) icon.

  If you wish you can make it 1px ( or even 0 px if you are okay with the C being close to the left edge of the screen) using the following style.

  .site-title {
  margin-left: 1px;
  }

• 

  camerashootrepeat · Member · Jan 24, 2015 at 6:44 pm

  • Copy link

  Thanks for your assistance.

  I have successfully restricted the site branding max width of 35% to the desktop.

  However when viewing on a mobile the A is hidden behind the hamburger and the T falls to the row below. Can you suggest how I remediate this? I have tried amending the margins to 0px but CAMERA|SHOOT|REPEAT still does not fit on one line.

  Many thanks

• 

  staff-happychia · Staff · Jan 24, 2015 at 11:32 pm

  • Copy link

  Let’s reduce the site title font by 25% (8px) on smaller screens:

  @media screen and (max-width : 400px) {
  .site-title a{
     font-size:24px;
  }
  }

• 

  camerashootrepeat · Member · Jan 25, 2015 at 3:30 pm

  • Copy link

  Great that worked.

  Thanks for your help.