Header Change for "Periodical theme" works on desktop, but not on mobile screens

• 

  frankthun · Member · May 11, 2017 at 11:19 am

  • Copy link
  • Add topic to favorites

  Just changed the positions of the logo and site id text and site text by adding some CSS Code supplied by a happiness engineer.

  Works really great on desktop, but on mobile screens, the header is messed up: Half of the text is off the screens right margin and Logo is above text, whereas it should be left of the text, as in the desktop screen.

  The preview in the customization menu shows this problem clearly

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

• 

  thesacredpath · Member · May 12, 2017 at 5:56 pm

  • Copy link

  Hi there, when I check your site by widening out my browser window really wide, and then narrowing it down, at some widths, the logo is to the left of the title and tagline, and then in a range of widths, the logo is above the site title/tagline and the tagline is not visible, and then at about 900px in width, the title/tagline starts to disappear off the left side.

  Can you tell me what your goal is for the arrangement and I’ll figure out the adjustments needed.

• 

  frankthun · Member · May 12, 2017 at 6:07 pm

  • Copy link

  target is to display logo and header like in the desktop version: logo aligned to the left side of the screen, text to the right of logo.

  currently, the logo disappears to the left and the text is halved onphone screens, and on pad screens the text is below and to the right of the logo, cut in half by the feature picture.
  thanks for your help!

• 

  thesacredpath · Member · May 13, 2017 at 3:37 am

  • Copy link

  Currently what I am seeing is the text moves below the logo at around 1430px in window/screen width, so we need to make some changes to the code you have. Given the combined length of your logo and title, it would require us to make those quite tiny to fit on a small phone side-by-side, so what I’m proposing is that we keep them side-by-side down to the point where the full menu changes into the touch device menu and then center things below that point. I’ve deleted some of the code you have and moved things around, so copy/paste what you have now into a plain text file for reference, and then replace it with the following and let me know what you think.

  .titles-wrap {
  	margin-top:3%;
  	float:right;
  }
  .site-identity {
  	padding-top:1%;
  	padding-bottom:1%;
  }
  .site-logo.attachment-periodical-logo {
  	height: 70px;
  	width: auto;
  }
  @media screen and (min-width: 801px) {
  .site-title-wrap {
  	max-width: 450px;
  	width: 450px;
  }
  .main-navigation {
  	max-width: calc(100% - 450px);
  }
  }
  @media screen and (max-width: 800px) {
  .titles-wrap {
  	text-align: center;
  	float: none;
  	margin-top: 0;
  }
  }

• 

  frankthun · Member · May 13, 2017 at 6:04 am

  • Copy link

  That’s just perfect- thank you!

• 

  thesacredpath · Member · May 13, 2017 at 8:25 pm

  • Copy link

  Hooray and you are welcome!