0

I'm trying to get this site working for mobile devices: http://whitehallrow.com/

I decided to remove the blue ribbons and corresponding photos for mobile, as they weren't being displayed well. So I made new images that combine the two elements for mobile. But when I view the page on my Blackberry, the pictures cover a large percentage of the text on the page. How can I fix this?

Ben
  • 139
  • 6
  • 13

1 Answers1

1

I would consider looking into CSS @media only.

Example:

Normal screen:

#div {
   properties for normal screen;
}

Mobile

@media only screen and (max-width: 400px) {
  #div {
  properties for mobile device here;
  }
}

See a more in depth look here: @media only screen

Derek Story
  • 9,518
  • 1
  • 24
  • 34
  • I've been using media queries, that's how I've been displaying certain elements of the page only on mobile. I'm wondering if there's a simple CSS trick that can keep the pictures from covering text? – Ben Jun 14 '13 at 22:12
  • You may be able to make it display: block in the media query to automatically drop it beneath the previous div. – Derek Story Jun 17 '13 at 13:53