1

I'm wondering if there is a way to use media queries to scale a divs contents (not the entire browser's contents). I have a fluid width site in which, when the window resizes past a certain point, some of the content gets buried behind some other content, and I'd like to be able to scale it.

I have two issues - one is that I'm using ems for the fonts, but the fonts don't scale as the browser resizes. Are they supposed to?

Second, some of the contents of the div I'd like to resize are images - so I'm not sure how to scale those other than to use a css scale property which wouldn't be supported on some browsers.

Can anyone recommend the easiest way to handle this? I've attached a screenshot of what happens on the site.enter image description here

mheavers
  • 29,530
  • 58
  • 194
  • 315
  • This is what media queries are for essentially, making changes dependant on the view size. Not sure about the images but the fonts are easy, just set your media queries and write new CSS for each of the fonts you want to change. The browser does the rest. And no, container size has nothing to do with font size regardless of how it's specified. – Rick Calder Oct 23 '12 at 15:43

1 Answers1

1

I believe part of this was touched on yesterday:

To resize your fonts according to the screen I believe you want viewport sized fonts:

vw vh and vmin.

http://css-tricks.com/viewport-sized-typography/

For resizing the images, just specify sizes accordingly for each screen size. You can also set specific font sizes according to screen size, or any CSS property for that matter:

/* mobile phones */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* This is where you would specify the width and hight of your images */
}

/* iPads (portrait and landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

There's more here: Responsive backgrounds with Twitter Bootstrap?

Community
  • 1
  • 1
Scott Hillson
  • 900
  • 1
  • 12
  • 30