Anything wrong with this code?

HTML & CSS
1

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 (orientation:portrait) {
.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!

2

For iPad and under, you could do this:

@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:

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

BTW: it’s not really a great idea to use px on fonts, as a rule.

3

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.

4

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.

5

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. :slight_smile: )

6

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!

7

To target just iPad with media rules, it might be better to use this:


@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.