CODEWITHSUNDEEP
htmlcssresponsive-design
thehiddentruth
thehiddentruth

Reputation: 17

Changing font-size HTML on different screen size

I have the website markedsføring på pizzabakker and I just can't figure out how to change the <h1> to be smaller on smaller screens. Can anyone please help me with that?

My CSS for the <h1> right now is just this:

font-family:'Coustard', sans-serif;
margin:0;
padding:0;
font-weight:300;

What should I do?

Upvotes: 1

Views: 6331

Answers (3)

m4n0
m4n0

Reputation: 32255

The other solutions are right but you can also try with this one. Alter the current CSS code to have 5vw unit which means it will autmatically calculate 5/100th of viewport width.

h1 {
  font-size: 5vw;
}

enter image description here

Upvotes: 3

aleksandar
aleksandar

Reputation: 2399

Matteo's code is correct. Try putting the code after the original h1 style. If that doesn't help, try with:

@media screen and (max-width:360px){
    h1{
        color:white;
        font-size:25px !important;
    }  
}

Upvotes: 3

Matteo Basso
Matteo Basso

Reputation: 2704

You can use media queries.

The @media rule is used to define different style rules for different media types/devices. In CSS2 this was called media types, while in CSS3 it is called media queries.

Here is an example

@media screen and (max-width:360px){
    h1{
        color:white;
        font-size:25px;
    }  
}

See this for information.

To develop responsive website I also suggest you to see Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Upvotes: 2

Related Questions