Changing font on tablets depending on screen orientation

• 

  andrewhallnz · Member · Dec 16, 2015 at 9:59 pm

  • Copy link
  • Add topic to favorites

  This may be a very unrealistic question. I am using twenty ten with a premium account. When I view my site on an iPad 4 held in portrait orientation the text gets very small. Because of this I have made the text larger which in my eyes makes it a bit clunky on a desktop screen. Is there a way with CSS of setting different font parameters which will increase the font size in this type of situation.

  Thanks for any help

  Andrew

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

• 

  thesacredpath · Member · Dec 17, 2015 at 4:08 am

  • Copy link

  Hi there, we can adjust the font sizes for smaller screens using a Media Query. You can add the following to your custom CSS and then play with, and test different font sizes to see if you can get something acceptable.

  Twenty Ten is quite old and is a Fixed Width theme. I would suggest you consider switching to a Responsive designed theme that will work with, and look great on, all screen/window sizes. Currently we have 308 responsive themes with 148 of those being free.

  If you wish to try out some CSS for this, here is a starting point. I’ve set the media query to adjust the size on screens/windows 768px and narrower.

  @media screen and (max-width: 768px) {
  #content {
  font-size: 18px;
  }

  The original font size was 14px.

  Let me know how things go.

• 

  andrewhallnz · Member · Dec 17, 2015 at 4:52 am

  • Copy link

  Thanks yet again thesacredpath. It looks to me like this may be something that can’t really work for iPads. What it seems to do is apply a cut-off regardless of the orientation of the screen. So, if I set max-width to 1000 I get 18 pt whichever way the ipad is held (refreshing on the change of orientation) whereas if I set it to 900 I get 14 pt whichever way. Any thoughts on a way around this?

  Thanks again

  Andrew

• 

  andrewhallnz · Member · Dec 17, 2015 at 5:25 am

  • Copy link

  I found this suggestion at
  https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  and after a lot of experimentation it seems to work.

  /* ----------- iPad mini ----------- */
  
  /* Portrait and Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* Portrait */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* ----------- iPad 1 and 2 ----------- */
  /* Portrait and Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* Portrait */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 1) {
  
  }
  
  /* ----------- iPad 3 and 4 ----------- */
  /* Portrait and Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (-webkit-min-device-pixel-ratio: 2) {
  
  }
  
  /* Portrait */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait)
    and (-webkit-min-device-pixel-ratio: 2) {
  
  }
  
  /* Landscape */
  @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: landscape)
    and (-webkit-min-device-pixel-ratio: 2) {
  
  }

  I am thinking for my purposes the following simpler code might work as when a device is held portrait it generally will need a larger font

  @media only screen
    and (orientation: portrait)
   	{
  		#content {
  		font-size: 24px;
  		}
  }

  Any thoughts @thesacredpath

  Andrew

• 

  andrewhallnz · Member · Dec 17, 2015 at 6:00 am

  • Copy link

  My latest version which adjusts the right widget area on the post page

  @media only screen
    and (orientation: portrait)
   	{
  		#content {
  		font-size: 18px;
  		}
  .widget-area {
  	font-family: Helvetica, Arial, sans-serif;
  	font-size: 14px;}
  }

  https://sufiordernz.wordpress.com/news-events/

  I feel like I am getting closer but who knows with the vast range of devices around.

  Andrew

• 

  thesacredpath · Member · Dec 17, 2015 at 7:44 pm

  • Copy link

  It is easy to get carried away with media queries for touch devices. What is going on now with those on responsive themes is the to use them where needed, but to not get device specific, and to not worry about doing them at breakpoints for specific devices, but use them where necessary. In other words, look and see where they make sense, and where they make sense may not match device widths. In other words, it may make sense to make a breakpoint at 600px rather than 768px and then another at 900px rather than 1024px. In general, responsive themes seem to be going to less breakpoints now that many designers are designing for mobile first and then working back up for larger devices.

• 

  andrewhallnz · Member · Dec 17, 2015 at 8:47 pm

  • Copy link

  I agree, simple is highly preferable. What I have now is pretty simple, it just differentiates on screen orientation, works for my laptop and my desktop, time will tell how it goes with others. Thanks again for your help,

  Andrew

• 

  thesacredpath · Member · Dec 18, 2015 at 2:01 am

  • Copy link

  You are welcome.