CODEWITHSUNDEEP
htmlcssmobilefont-size
giaggi
giaggi

Reputation: 572

HTML/CSS - Adjust font-size when going between desktop and mobile

I have this simple html file and I am trying to understand why my font size doesn't scale down when I move to mobile view. I though font-size:7em would adjust when moving from desktop to mobile.

I know this is super silly, but I can't understand. Do I need to use a @media query?

`

body {
    background: black;
    font-family: "Big Caslon";
    margin-top:3em;
    margin-bottom:3vw;
    margin-left:12vw;
    margin-right:12vw;
  }

section {
    color: white;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }

.title {
  font-size:7em;
  margin:10px;
}
<html>
  <head>

    <title>ShopDoran</title>
    <link rel="icon" href="">
    <link rel="stylesheet" type="text/css" href="doran.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

  <section>
    <div class="title">  D O R A N  </div>
    <p style="font-size:2em; margin:10px;">coming soon </p>
  </section>

</html>

`

Upvotes: 0

Views: 7552

Answers (3)

Jefin Winston
Jefin Winston

Reputation: 55

Use the unit font-size: 7vw for the font size, it should fix the issue.

Upvotes: -1

BDB88
BDB88

Reputation: 581

First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.

The correct way to solve this would be for you to set up a @media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller. I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,

@media screen and (max-width: 600px) {
  .title {
    font-size: 2rem;

  }

A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:

.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}

Upvotes: 3

Ali Kianoor
Ali Kianoor

Reputation: 1243

I think you should check the CSS Unit as @Burham B. Soliman mentioned, But I will draw a guideline on how you can make it:

1- Add Font size into your HTML body like this:

html{
  font-size:16px;
}

2- Size the element font like this:

title{
  font-size: 3rem;
}

3- Set A Media Query for desire viewport size (for example 600px):

@media only screen and (max-width: 600px) {
  html{
    font-size: 10px;
  }
}

There are also other ways that you can handle this. It is just an example.

Upvotes: 0

Related Questions