controlling line breaks on mobile devices

• 

  tracyjfox · Member · Apr 29, 2016 at 3:42 pm

  • Copy link
  • Add topic to favorites

  Hi

  How can I control where the site description text breaks when viewed on a small device ie a phone. It looks ok in landscape orientation but not in portrait. It looks fine on a desktop and tablet but not on a phone.

  ‘designer maker unique hand’ is on one line then ‘dyed fabric’ is underneath.

  My blog is tracyfox.co.uk and I have CSS Customization.

  Many thanks

  t r a c y

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

• 

  thesacredpath · Member · Apr 29, 2016 at 8:24 pm

  • Copy link

  Hi Tracy, give me a bit of time on this. I’m seeing a number of things that I think we can adjust to make the title and description work better on any screen/window width, but I’m having a bit of difficulty getting the description to break where I think you want it to break. Can you verify where you want it to break?

• 

  tracyjfox · Member · Apr 29, 2016 at 9:47 pm

  • Copy link

  Hello again thesacredpath

  I would like it to remain on one line where it can then have ‘designer maker’ on one line then ‘unique hand dyed fabric’ underneath if that is possible.

  Thanks for your help,

  t r a c y

• 

  thesacredpath · Member · Apr 30, 2016 at 4:48 am

  • Copy link

  Thanks for the clarification.

  Go to your custom CSS, go clear to the bottom and add the following and save and then visit your site and narrow and widen your browser window and also visit on a tablet and phone and see how things look.

  /*new header styling*/
  #site-title {
  	text-align: center;
  	margin-left: 0;
  	padding-left: 2%;
  	padding-right: 2%
  }
  
  #branding hgroup {
  	margin-left:0;
  	margin-right:0;
  }
  
  #site-description {
  	color:#2b4e72;
  	float:left;
  	font-size:30px;
  	margin:0;
  	width:100%;
  	text-align:center;
  	box-sizing: border-box;
  	padding-left: 2%;
  	padding-right: 2%;
  }
  .wf-active #site-description {
  	font-size:30px
  }
  @media screen and (max-width: 767px) {
  	#site-description {
  		margin-top:0;
  	}
  	hgroup {
  		height:100px;
  	}
  	#access li a {
  		line-height:1.7
  	}
  	#access ul ul {
  		top:1.5em
  	}
  }
  @media screen and (max-width: 600px) {
  	.wf-active #site-description {
  		font-size: 24px;
  		margin-left: 0;
  		margin-right: 0;
  		padding-left: 2%;
  		padding-right: 2%;
  		box-sizing:  border-box;
  	}
  }
  @media screen and (max-width: 480px) {
  	.wf-active #site-description {
  		font-size: 18px;
  	}
  	.wf-active #site-title a {
  		font-size: 60px;
  	}
  	hgroup {
  		height: 110px;
  	}
  }
  @media screen and (max-width: 375px) {
  	.wf-active #site-title a {
  		font-size:45px;
  		text-align:center;
  	}
  	.wf-active #site-description {
  		font-size:16px;
  		text-align:center;
  	}
  }
  @media screen and (max-width: 360px) {
  	.wf-active #site-description {
  		font-size: 14px;
  	}
  	hgroup {
  		height: 100px
  	}
  }

  Let me know what you think. There are a ton of CSS rules in the stuff above that could be removed since I’m overriding them with what I have, but I go cross-eyed looking for them and trying to figure out what all I can remove, although I would definitely recommend removing this one, which is near the bottom of your existing CSS.

  @media screen and (max-width: 360px) {
  	.wf-active #site-title a {
  		font-size:180%;
  		text-align:center
  	}
  	.wf-active #site-description {
  		font-size:22px;
  		text-align:center
  	}
  }

• 

  tracyjfox · Member · Apr 30, 2016 at 12:21 pm

  • Copy link

  Hi

  Thank you so much for this reply – I have done as recommended above and it looks really good.

  In portrait on a phone the site description actually stays on one line and the font size is adjusted to a smaller size which is probable better than breaking on to 2 lines.

  I have noticed though that the coloured background that highlights the page you are on isn’t quite right.

  The page names that are on the left hand side – the highlighted background extends beyond the left hand margin.

  Is there a way of correcting this? The overhang is bigger when viewing on a phone.

  Thanks again

  t r a c y

• 

  tracyjfox · Member · Apr 30, 2016 at 12:43 pm

  • Copy link

  Forgot to add..

  The space between the site description and the image is also increased in portrait view on a phone but not the others

  t r a c y

• 

  thesacredpath · Member · May 2, 2016 at 9:05 pm

  • Copy link

  Tracy, on the menu, find the following two CSS rules in your custom CSS and change them to this.

  #access div {
      margin-left: 0;
      margin-right: 0;
  }
  #access ul {
      margin-left: 0;
  }

  On the spacing, in the 480px media query, change the hgroup height to 100px.

  Add an hgroup rule to the 375px media query and a height of 90px.

  Let me know how that works.

• 

  thesacredpath · Member · May 2, 2016 at 9:06 pm

  • Copy link

  Oh, and one more thing, remove the hgroup rule from the 360px media query.

• 

  tracyjfox · Member · May 4, 2016 at 9:54 am

  • Copy link

  Hi thesacredpath

  A huge huge thank you once again for your help!

  I have made all the changes you provided and they have worked a treat.

  Really pleased with how it’s looking, hopefully I haven’t buggered anything up!

  Thanks again

  t r a c y

• 

  thesacredpath · Member · May 4, 2016 at 6:22 pm

  • Copy link

  You are welcome Tracy, and your site is looking great and working well. Let us know if you have additional questions.

• 

  tracyjfox · Member · May 6, 2016 at 8:53 am

  • Copy link

  Thank you :)