CODEWITHSUNDEEP
htmlcss
Hatem AbdAlsamad
Hatem AbdAlsamad

Reputation: 5

Can't change h1 size

i can't change size of h1. i tried %, em, px i tried also ctrl +f5 to force browser for cashing but nothing work

i need to know where is the problem and how to keep this text in large size with some words smaller.

this is index.html

{% extends 'base.html' %}
{% load static %}
{% block title %} Markvira {% endblock %}
   
{% block content %}

  <!-- main -->
  <main role="main">
    <section class="section-one">
      <div class="container-one">
        <h1 class="h1"> Fly <span>With <br> Our</span> Wings </h1>
        <p class="p">it's the time to fly in yhe world of success with our marketng tools,we give you wings </p>
      </div>
    </section>

    <section class="section-two">
      <div class="container-two">


      </div>
    </section>



  </main>
  <!-- End of Main -->
{% endblock %}

this is style.css

@import "header.css";
@import "footer.css";


body html{
    margin: 0px;
    padding: 0px;
    font-size: 75%;
}

/* section one */
.section-one{
    background-image: url('../images/fly-wings.jpg');
    -webkit-backround-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
}


.h1{
    
    font-family: poppins;
    font-weight: bold;
    color: white;
    padding: 1.5em 0 1em 15em;
}

.h1 span{
    font-size: 1em;
}

.p{
  font-size: 300px;
  font-family: poppins;
  color: white;
  padding: 1.5em 0 1em 12em;
}

@media screen and (min-width: 601px) {
    .h1 {
      font-size: 40px;
    }
  }
  
@media screen and (max-width: 600px) {
    .h1 {
      font-size: 100px;
    }
  }

/* End of Section One */

/* Section Two */
.section-two{
  background-image: url('../images/orange-back.jpg');
  -webkit-backround-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

i always get this size and can't increase itenter image description here

Upvotes: 0

Views: 1671

Answers (1)

Joshua Tuscan
Joshua Tuscan

Reputation: 373

Your media queries are completely overwriting where you first define the .h1 class so setting the font size there will not work.

  @media screen and (min-width: 601px) {
    .h1 {
      font-size: 40px;
    }
  }



@media screen and (max-width: 600px) {
    .h1 {
      font-size: 100px;
    }
  }

Those two rules are controlling the size of your .h1 class. The max-width one will be anything below 600px and the min-width will be anything above 601px width. Try modifying the font size there. Right now you have it set to 100px for screens that are small in width and 40px for screens that are wider than 600px.

Upvotes: 2

Related Questions