CSS3 Media Queries with css3 tabs

Question

![enter image description here][1]Essentially, i have created some nice tabs in ccs3 with radio buttons. Which looks fantastic in the browser and works a treat.

However this isn't the case on a mobile device, the text overflows out of the tabs pretty little container. The media queries in place don't seem to be doing anything, Any ideas on how to get this working?

.tabs {
    position: relative;   
    min-height: 260px; /* Changes the height of the tabs section, enables you to change it for your text */
    clear: both;
}

@media only screen and (max-width: 480px)  {
    .tabs {
        min-height: 480px; /* Changes the height of the tabs section (MOBILE), enables you to change it for your text */
    }
}

So what i'm trying to do is simply get a media query working so that i can change the height of the containing tab, so that the text in the container.

http://mdixon94.co.uk/HTML/elements.html

you can see here, that the tabs section if you scroll down looks fine, however if you preview it in say an iphone the text goes everywhere and i simply want to make the container bigger with a media query.

Answer 1

You can use ellipsis in CSS

.tabs {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

which should give you something like this:

Desktop
|This is my tab text|
Mobile
|This is my...|

Answer 2

You also can add this property:

.tabs {
   white-space:normal;
}