2

I'm trying about responsive design.

http://quirktools.com/screenfly/#u=http%3A//rus-turk.com/newyln/en.html%23secondPage&w=320&h=480&a=33&s=1

font-size seeming OK if to push any link or reload page but getting smaller with orientation change.

also is not fixing with ctrl+ zoom.

I loaded such

@font-face {
    font-family: 'Easy';
    src: url('fonts/Easy.eot');
    src: url('fonts/Easy.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Easy.woff') format('woff'),
    url('/fonts/Easy.ttf') format('truetype'),
    url('/fonts/Easy.svg#arbat') format('svg');
    font-weight: normal;
    font-style: normal;}

 @media only screen and (min-width: 320px) and (max-width: 479px) and (orientation:portrait) {

    .container {
position: relative;
width: 100%;
margin: 0 auto;
height: 480px;
padding: 0;
overflow: hidden; }
   .container .columns { 
float: left; display: inline; margin-left: 0; margin-right: 12%; }
    .row                                        
{ margin-bottom: -10px; }
   .container .eight.columns {
width: 300px;
margin-bottom: -12%;
margin-left: -3%;
padding-top: 12%;
}

#stars1, #texttwo, #texttre, #textfour, #textfive, #textsix, #stars2, #texttwotwo, #texttwotre, #texttwofour,#texttwofive, #texttwosix, #stars3, #texttretwo, #texttretre, #texttrefour, #texttrefive, #texttresix, #texttreseven, #texttreeight , #stars4, #textfourtwo, #textfourtre, #textfourfour, #textfourfive, #textfoursix, #textfourseven, #textfoureight, #stars5, #textfivetwo, #textfivetre, #textfivefour, #textfivefive, #textfivesix {
    font-family: "Easy";
    white-space: pre;
    max-width: 320px;
    margin-bottom: -10px;
font-size: 2em;
color: rgba(225,207,189,0.5);
position: relative;
text-align:center;
z-index: 5;
    opacity:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
}

Is there any solution?

svt
  • 21
  • 3
  • Have you tried seeing if you can replicate it in Firefox's Responsive Design View (crtl-shift-M)? – amphetamachine Oct 08 '14 at 14:09
  • You've only added css info about the font family you're using--nothing about font sizing or screen dimensions. Please see the instructions on [how to create a minimal, complete, verifiable example](http://stackoverflow.com/help/mcve). – i alarmed alien Oct 08 '14 at 14:27
  • I tried Firefox's Responsive Design View, it is showing this problem. I added the part of code with font-size and screen dimension. Hope for help) – svt Oct 08 '14 at 15:12

1 Answers1

0

The problem is solved. To change em to rem was the only thing I needed.

svt
  • 21
  • 3