0

I am practicing html and css and want to make a website, but the text isn't scaling properly.

html

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Website</title>
        <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet">
        <link href="style.css" rel="stylesheet" text="text/css">

      </head>
      <body>
        <div id="huge"></div>
        <div class="navbar">

          <div id="navbar-background"></div>

          <div id="home-div">
            <p id="home-text">Home</p>
          </div>

          <div id="home-div-button"></div>


        </div>
      </body>
    </html>

css:

body {
      background-image: url('http://wallpapercave.com/wp/adsKXLw.png');
      background-repeat: no-repeat;
      background-size: cover;
    }

    html, body {
      height: 100%;
    }

    #huge {
      width: 85.8%;
      height: 100%;
      position: relative;
      background-color: rgba(255, 103, 48, 0.5);
      left: 7%;
    }

    .navbar div, .navbar div p {
      position: fixed;
    }

    #navbar-background {
      width: 77.5%;
      height: 22.5%;
      border-radius: 70px;
      top: 2.5%;
      left: 11%;
      background-color: rgba(255,255,255, .2);
      z-index: 1
    }

    #home-div {
      background-color: rgb(249, 162, 100);
      width: 19.5%;
      height: 12%;
      border-radius: 30px;
      color: #FFFFFF;
      position: fixed;
      left: 12%;
      top: 6%;
      z-index: 2;
      border-top: 1px white solid;
      border-left: 1px solid white
    }

    #home-div-button {
      background-color: rgb(200, 131, 78);
      width: 20%;
      height: 12%;
      border-radius: 30px;
      z-index: 1;
      top: 8%;
      left: 12.5%;
      position: fixed;
    }

    #home-text {
      font-size: 3.3em;
      font-family: Comfortaa;
      text-align: center;
      line-height: 1.3em;
      top: 2.3%;
      left: 13%;
    }

When I resize my browser everything scales except the text, which starts going out of the button that it is on top of.

I can't find an easy answer for this anywhere. All I need is a technique that I can repeat for other situations that will make the text scale with everything else.

body { background-image: url('http://wallpapercave.com/wp/adsKXLw.png'); background-repeat: no-repeat; background-size: cover; } html, body { height: 100%; } #huge { width: 85.8%; height: 100%; position: relative; background-color: rgba(255, 103, 48, 0.5); left: 7%; } .navbar div, .navbar div p { position: fixed; } #navbar-background { width: 77.5%; height: 22.5%; border-radius: 70px; top: 2.5%; left: 11%; background-color: rgba(255,255,255, .2); z-index: 1 } #home-div { background-color: rgb(249, 162, 100); width: 19.5%; height: 12%; border-radius: 30px; color: #FFFFFF; position: fixed; left: 12%; top: 6%; z-index: 2; border-top: 1px white solid; border-left: 1px solid white } #home-div-button { background-color: rgb(200, 131, 78); width: 20%; height: 12%; border-radius: 30px; z-index: 1; top: 8%; left: 12.5%; position: fixed; } #home-text { font-size: 3.3em; font-family: Comfortaa; text-align: center; line-height: 1.3em; top: 2.3%; left: 13%; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Website</title> <link href="https://fonts.googleapis.com/css?family=Comfortaa" rel="stylesheet"> <link href="style.css" rel="stylesheet" text="text/css"> </head> <body> <div id="huge"></div> <div class="navbar"> <div id="navbar-background"></div> <div id="home-div"> <p id="home-text">Home</p> </div> <div id="home-div-button"></div> </div> </body> </html>

If you put the snippet to a full page, then the text will be in the right spot.

BOBONA
  • 100
  • 12
  • Possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) – Jordan Soltman Mar 07 '17 at 02:31
  • Realistically you can't easily do that. Perhaps set a `min-width` on the button, or look into media queries to change the size of the button for different devices sizes. – Jordan Soltman Mar 07 '17 at 02:31
  • Consider using `vw` fonts https://zellwk.com/blog/viewport-based-typography/ – Michael Coker Mar 07 '17 at 02:31
  • Is there a way to set a min or max text size? – BOBONA Mar 07 '17 at 02:37
  • I don't want to use vw, vh, vmax, vmin, etc. because they seem to be new and not well supported on browsers. Or should i use them? If I can then I will probably just make a min and max of every element on the page. Or should I specify divs through px instead of em? I'm new with this so I don't really know how I should be making it. – BOBONA Mar 07 '17 at 02:39

0 Answers0