Pilcrow CSS questions: nav title line breaks, content alignment, mobile

  • Unknown's avatar
    annemariesanderson · Member ·

    Hello there,

    I’m having trouble with the site title and menu on my site. They split into two lines on small screens and end up sitting on top of each other.

    I’d also like to make the content width narrower, whilst keeping it in the center of the page. Currently, if I make it narrower it stays to the left of the page.

    One more question: when viewed on a smartphone, my background image doesn’t cover the whole screen. How can I make it do so?

    Thanks in advance for any help!

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

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there,

    I’m having trouble with the site title and menu on my site. They split into two lines on small screens and end up sitting on top of each other.

    You have moved the navigation up above the site title, which can cause this type of issue when you have a large, long title such as you do. We have a couple of options.

    One would be to set a minimum width for #wrapper. We would have to set that at about 950px so that your menu and site title don’t wrap to a second line.

    The other option would be to use a Media Query to move the site title down when the menu wraps to a second line. This would be the preferred solution I think.

    First off, modify #nav so that it looks like this 

    #nav{
	color:#000;
	position: absolute;
	font-weight:700;
	border-width:0;
	max-height:42px;
	margin-left:90px;
	top: 0;
}

    and then add the following rules at the very bottom of your custom CSS 

    #header {
    position: relative;
}
@media screen and (max-width: 925px) {
	#site-title {
		margin-top: 100px;
	}
}
@media screen and (max-width: 475px) {
	#site-title {
		margin-top: 150px;
	}
}

    For the content width, modify your existing #content-box rule so that it looks like this. This changes the width of the content only, not the entire overall site width. With your long, large title, if we narrowed the overall site width, your site title would break to two lines. I arbitrarily chose 500px as a maximum width, but you can adjust that as desired. 

    #content-box{
	color:#000;
	font-size:15px;
	text-align:center;
	max-width:500px;
	margin-left: auto;
	margin-right: auto;
}
  • Unknown's avatar
    annemariesanderson · Member ·

    Hello!
    Thanks for your help.
    I’ve tried your suggestions and I’m making progress. I’m happy with how my site looks when I view it on my computer. I’ve now got my content width in the center where I want it, all looks fine using the preview tools for tablets and smartphones.
    BUT – when I look at it on an actual smartphone, I’m still having the same kind of problem, where the site title is sitting on top of the menu, and the background image isn’t covering the whole background.
    Is there a way to keep the mobile site super simple? I have tried unselecting the box for “include this CSS in the Mobile Theme” option, but it doesn’t seem to change anything. I don’t really mind if it doesn’t look as nice as the desktop version, but it’s barely functional with different elements sitting on top of each other.

    Thanks again!

  • Unknown's avatar
    thesacredpath · Member ·

    Hmmm, interesting. In your custom CSS, you have a float: center; on #header and that is not a valid value for float. Remove this from your custom CSS: 

    #header {
float: center;
}
  • Unknown's avatar
    annemariesanderson · Member ·

    Thanks! That seems to help!
    I’m only just now realising that the mobile site looks different on different browsers – it looks pretty good on safari but terrible on chrome… I’m quite lost.
    Specifically, the background image on mobile chrome doesn’t cover the page and looks very messy, but on safari it does cover the page.
    Is there a way to control that?
    Thanks again for your help thus far!

  • Unknown's avatar
    thesacredpath · Member ·

    Can you tell me which phone you are using with Chrome? I’ve run things through a number of emulations in my desktop Chrome browser and can’t see a problem.

  • Unknown's avatar
    annemariesanderson · Member ·

    I’ve tried it on a motorola moto g and an alcatel model too. Both appear the same, with the background only taking up part of the screen.
    Thanks for your help!

  • Unknown's avatar
    kevmarsden · Member ·

    Hi Anne-Marie,

    Adding this CSS should help ensure that the background image covers the screen on Chrome:

    html{
     height:100%;
     min-height:100%;
}

    Please let me know if that helps. Thanks!

  • The topic ‘Pilcrow CSS questions: nav title line breaks, content alignment, mobile’ is closed to new replies.