Help with code please [CSS3]

[Thor]

Hi, I have a website in bootstrap and want the font to be responsive. The banner is perfect and responsive, however the font stays a fixed size.

The font I am referring to is the three in <ul> twitter, reseller, facebook.

( Disclaimer: I am not a web designer, I'm learning as we go along )

{In the CSS I used a.text, becuase I have other a references that needs to stay unchanged}

HTML:

<div class="row">
  <div class="col-md-6">
      <ul>
            <li><a href="https://twitter.com/" class="text" target="_blank">Twitter</a></li>
            <li><a href="reseller.html" class="text" target="_blank">Reseller</a></li>
	    <li><a href="https://www.facebook.com/" class="text" target="_blank">Facebook</a></li>
      </ul>	
  </div>
  <div class="col-md-6">
      <img src="/img/banner.png" class="img-responsive" alt="Responsive image">
  </div>
</div>

CSS:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.eot');
    src: url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.eot?iefix') format('eot'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.woff') format('woff'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.ttf') format('truetype'),
         url('http://www.midwinter-dg.com/blog_demos/css3-buttons/chunkfive-webfont.svg#webfont6hibqX7I') format('svg');
    font-weight: normal;
    font-style: normal;
}


a.text:link, a.text:visited {
	color: #555;
	text-decoration: none;
}

a.text:hover, a.text:active {
	color: #0080ff;
}

/* button styles */



li {
	list-style-type: none;
}
/* Font color */
a.text:link, a.text:visited {
color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 60px/60px 'ChunkFiveRegular';
	display: inherit;
}

a.text:hover {
	text-shadow: 0 0 10px #FF0000, 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}

a.text:active {
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 5px 7px #001135;
	margin-top: 4px;
	line-height: 56px;
	color: #FF1919;
}

 

[_kabal_]

use different font sizes on different @media max-widths in css

 

[Thor]

use different font sizes on different @media max-widths in css

English please

I am noob 101

I did look at the @media, but I don't know how to use them?

I suspect the issue is to do with this:

]
a.text:link, a.text:visited {
color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 60px/60px 'ChunkFiveRegular';
	display: inherit;
}

]

More precisely, this:

font: 60px/60px 'ChunkFiveRegular';

]

 

[Thor]

@_kabal_ Thank you, you sexy beast

I used this:

CSS:

@media (max-width: 480px) {
a.text:link, a.text:visited {
color: #fff;
	text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
	font: 30px/30px 'ChunkFiveRegular';
	display: inherit;
}

 

[_kabal_]

@_kabal_ Thank you, you sexy beast

I used this:

CSS:

@media (max-width: 480px) {
    a.text:link, a.text:visited {
        color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
        font: 30px/30px 'ChunkFiveRegular';
        display: inherit;
}

I am no CSS expert, but if you wanted to be able to avoid duplication do this.

a.text:link, a.text:visited {
    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font: 60px/60px 'ChunkFiveRegular';
    display: inherit;
}

@media (max-width: 480px) {
    a.text:link, a.text:visited {
        font: 30px/30px 'ChunkFiveRegular' !important;
    }
}

that way, no matter the page width, it will always use the font 60 and the text shadow, etc, but only when the width is 480px or less, will the font decrease.

then you could for instance easily add

@media (max-width: 720px) {
    a.text:link, a.text:visited {
        font: 40px/40px 'ChunkFiveRegular' !important;
    }
}

and now have multiple different font sizes depending on screen size

 

[Noseworthy]

I am no CSS expert, but if you wanted to be able to avoid duplication do this.

a.text:link, a.text:visited {
    color: #fff;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
    font: 60px/60px 'ChunkFiveRegular';
    display: inherit;
}

@media (max-width: 480px) {
    a.text:link, a.text:visited {
        font: 30px/30px 'ChunkFiveRegular' !important;
    }
}

that way, no matter the page width, it will always use the font 60 and the text shadow, etc, but only when the width is 480px or less, will the font decrease.

then you could for instance easily add

@media (max-width: 720px) {
    a.text:link, a.text:visited {
        font: 40px/40px 'ChunkFiveRegular' !important;
    }
}

and now have multiple different font sizes depending on screen size

Thats correct

Bootstrap has all the media queries listed, use them

 

[Thor]

Thank you for the help guys.

Wow what a world