SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist Caesar's Avatar
    Join Date
    May 2000
    Location
    On some harddisk
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Anything wrong with this code?

    Hi all,

    I'm not very well-versed with css so need some help here.

    For the following ...

    /*--------JOBS@OURSITE----------*/

    p#jobscontent {font-size: 24px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 72px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}

    /* == iPad/iPhone [portrait + landscape] == */
    @media (max-width:989px),
    (max-device-width:480px) and (orientation:landscape) {

    p#jobscontent {font-size: 42px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 86px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}

    @media (max-width:989px),
    (min-device-width:481px) and (orientationortrait) {
    .body-wrap {width:100%; padding:0;}
    p#jobscontent {font-size: 42px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 86px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}
    }}

    Am I doing it right to specify that if it's on an iDevice, for p#jobscontent & p#jobstitle let it be font size 42 and 86 respectively and on the normal desktop, 24 and 72?

    If not, what do I need to correct?

    Tks!
    Go increase web site traffic by using 27 proven strategies!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    For iPad and under, you could do this:

    Code:
    @media only screen and (max-width : 1024px) {
      p#jobscontent {font-size: 42px;}
      p#jobstitle {font-size: 86px;}
    }

    Also, in the head of your page, it's worth putting this:

    Code:
    <meta name="viewport" content="width=device-width">
    Edit:

    BTW: it's not really a great idea to use px on fonts, as a rule.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Caesar's Avatar
    Join Date
    May 2000
    Location
    On some harddisk
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Meantime,

    I've changed the code to ...

    /*--------JOBS@OURSITE----------*/

    p#jobscontent {font-size: 24px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 72px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}

    @media all and (device-aspect-ratio: 2/3) { /*--------iPhone 4S----------*/
    p#jobscontent {font-size: 42px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 86px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}
    }

    @media all and (device-aspect-ratio: 3/4) { /*--------iPad----------*/
    p#jobscontent {font-size: 42px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 86px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}
    }

    Seems a lot cleaner to me.
    Go increase web site traffic by using 27 proven strategies!

  4. #4
    SitePoint Evangelist Caesar's Avatar
    Join Date
    May 2000
    Location
    On some harddisk
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks ralph!

    1) So using your code applies to ALL screen sizes for iPad and under? (Including iPhone, etc?)

    2) As for <meta name="viewport" content="width=device-width">, what does this do?

    3) What would you suggest then? => BTW: it's not really a great idea to use px on fonts, as a rule.



    Quote Originally Posted by ralph.m View Post
    For iPad and under, you could do this:

    Code:
    @media only screen and (max-width : 1024px) {
      p#jobscontent {font-size: 42px;}
      p#jobstitle {font-size: 86px;}
    }

    Also, in the head of your page, it's worth putting this:

    Code:
    <meta name="viewport" content="width=device-width">
    Edit:

    BTW: it's not really a great idea to use px on fonts, as a rule.
    Go increase web site traffic by using 27 proven strategies!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Caesar View Post
    So using your code applies to ALL screen sizes for iPad and under? (Including iPhone, etc?)
    Yes, should do. Anything under a width of 1024px.

    <meta name="viewport" content="width=device-width">, what does this do?
    It makes for more predictable results in how your site appears on mobile screens (fitting it into the viewport). But it's not hugely relevant to this font issue.

    What would you suggest then? => BTW: it's not really a great idea to use px on fonts, as a rule.
    Generally ems are better for fonts. If you set a font in px, it makes life harder for those who want o resize text for easy reading, so is better avoided ... even if it makes life a bit easier for you as a coder. (The site is for visitors, after all, rather than you. )
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Evangelist Caesar's Avatar
    Join Date
    May 2000
    Location
    On some harddisk
    Posts
    599
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph,

    I'm actually working on 2 pages:
    1) http://differworld.com/ &
    2) http://differworld.com/jobs/

    And am using this little bit of code below to maximize the readability via screen size:

    /*--------JOBS----------*/

    p#jobscontent {font-size: 24px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 72px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}

    @media all and (device-aspect-ratio: 2/3) { /*--------iPhone 4S----------*/
    p#jobscontent {font-size: 48px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 92px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}
    h2.hTitle {font-size: 48px; font-family: Helvetica, "Georgia"; font:bold; padding-bottom: 7px; margin-bottom: 40px; border-bottom: 1px dashed #ccc; position: relative; z-index: 1;}
    #crumbs {font-size: 36px; float: right; text-align: right; padding-top: 8px; margin-left: 20px; max-width: 440px; position: relative; z-index: 2;}
    #dropmenu li a {display: inline-block; line-height: 37px; font-size: 42px; padding: 0 25px; color: #6c6c6c; /*THIS IS AN IE7 FIX --> */zoom: 1;*display:inline;}
    }

    @media all and (device-aspect-ratio: 3/4) { /*--------iPad----------*/
    p#jobscontent {font-size: 42px; font-family: Helvetica, Georgia, serif; color:#6c6c6c;text-shadow: 1px 1px 1px #ffffff;}
    p#jobstitle {font-size: 86px; font-family: Helvetica, Georgia, serif; color:#6c6c6c; text-align:center;text-shadow: 1px 1px 1px #ffffff;}

    /* #contentContainer {width:100%;}
    #content {margin: 0 auto; width:100%;}
    #main {width:100%;} */
    }

    Appears pretty fine on the iPhone but how do I get it to maximize using the screen width on the iPad?

    Tks!
    Go increase web site traffic by using 27 proven strategies!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    To target just iPad with media rules, it might be better to use this:

    Code:
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
    /* Styles */
    }
    I would also update the meta viewport line to the one I suggested.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •