Question: I have tried using media queries as below but it dint help even tried a % value for the font size. Please note outside the media queries I have a font size of 18pt for now and in mobile view I need font size of 10pt. Have tried possible ways I could google.

```
 @media only screen and (max-width: 768px) {
        user-access-panel .details-panel .panel-body {
            padding: 0px 0px 0px 0px !important;
            width: 100.29%;
            height: 130px;
            background-image: url("./images/icons/request-ID-card-bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            color: #3d4045;
            /*font-family:  Helv-neue-light;*/
            background-color: white;
            font-family: sans-serif;
            font-size: 10pt;
            border: 1px solid lightgray;
            box-shadow: 2px 2px 10px 1px lightgray;
            vertical-align: middle;
        }
    }

```

Answer: 
`pt` is a unit used for printing - for screen you should use `px`, or even better `em` or `rem`. Especially `rem` is useful for repsonsive design since 1 rem is the browser's default size, which usually is a proper size for "normal" text (i.e. in a paragraph, not in headers)
You can use `vw` units for font size to achieve this affect. But please review browser support for this option: <http://caniuse.com/#feat=viewport-units>.

```css
.responsive-type {font-size: 15vw;}
```

```html
<div class="responsive-type">
 <p>I am responsive</p>
</div>
```