Heading not getting smaller with the screen

user_15950353 0
Viewed 114

What I want to do is place a heading over an image. What is bothering me is that in full-screen the heading is working perfectly with the image but as soon as I shrink the screen, the heading stays exactly the same proportions as in full-screen. I cannot seem to make it respond with this code that I used, and also cannot seem to find the mistake. Also tried height and width in percentages, didn´t work. I would much appreciate it if someone helped me. Thank you!

   <header>
        <img src="./img/web-dizajn.jpg" alt="swd-web-dizajn">
        <h2 class="tagline">This is the heading!</h2>
   </header>```


.intro-section header{
  position: relative
  
}
.intro-section header img{
   width: 100% ;
   
  

}

 .tagline{
   color: #fff;
   font-size: 40px;
   text-align: right;
   background-color: rgba(255, 153, 0, 0.9);
   padding: 40px;
   margin: 0;
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
}
responsive css html
5 Answers

Use media queries to change the font size of the .tagline class at certain breakpoint of width

Or use rem units instead of px

user_136134000

Simply just use media queries to change font sizes (of the tagline class) or use REM Units

URLS for Media Queries

  1. w3documentation: https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
  2. another w3documentation: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

What are REM Units

You might have encountered the term “R.E.M.” before while listening to the radio or your music player. Unlike their musical counterparts, named for the “Rapid Eye Movement” during deep sleep, in CSS rem stands for “root em”. They won’t make you lose your religion nor believe in a man on the moon. What they can do is help you achieve a harmonious and balanced design.

According to the W3C spec the definition for one rem unit is:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

user_156792820
user_90157830

I didn't get the problem clearly, but as you said you are trying to place text over an image, you can do this by putting the Image on the background.

<header style="background-image: url('<your image url>'); background-size: cover;">
  <h2 class="tagline">This is the Heading!</h2>
</header>
user_151954750

you can use @media screen in css

/* this code will be executed if screen in smaller than 1920px */
@media screen and (max-width: 1920px) {
  .header {
    width:550px;
    height:100px;
    background-color:green
  }
}
/* this code will be executed if screen in smaller than 992px */
@media screen and (max-width: 992px) {
  .header {
    width:250px;
    height:50px;
    background-color:cyan
  }
}

/* this code will be executed if screen in smaller than 600px */
@media screen and (max-width: 600px) {
  header. {
    width:100px;
    height:30px;
    background-color:red
  }
}
<div class='header'>header content</div>
<div class='content'>Content</div>

user_134040960
Related