Hi in the secon exercise of the course there’s the hubble problem.
I just want to know what is this line of code telling to do to the hero:
.hero .tagline {
background: rgba(0, 0, 0, 0.6);
font-size: 2rem;
font-weight: 300;
letter-spacing: 1.5px;
padding: 1.5rem;
}
and also after the first media query this:
/* I dont know if it just for styling, because when i erase it nothing in the proyect change*/
.hero .tagline {
font-size: 3rem;
}
Hi,
About the first Part which is about the paragraph(.tagline) inside of the .hero section:
You gave it:
a background-color of black with 0.6 transparency
a font-size of 2rem (20px)
font-weight and letter-spacing are clear
and you gave it a padding of 1.5rem (15px) on all sides
Now about the second part:
This is how our paragraph font-size shows on mobile (which is 2rem):
But when we reach 760px or 768px wide (which is the standard width for tablets) our paragraph font-size get bigger by 3rem (30px):
And if you pay attention you will see that on mobile the background image are blurry but when you reach 768px wide the background image starts to look more clear and transparent.
