CODEWITHSUNDEEP
htmlcsssass
in43sh
in43sh

Reputation: 921

why font size 62.5% for body tag not working?

I'm trying to implement the font-size: 62.5% for the body tag:

body {
    font-size: 62.5%;
}

I have it in my _reset.scss file but for some reason, it doesn't work. I have two screenshots from the Chrome DevTools.

Here's the GitHub link for my project: https://github.com/MajesticBay/nearballard_v2

Here's the link for the live version: https://nearballardv2.netlify.app/

enter image description here enter image description here

Upvotes: 1

Views: 1091

Answers (2)

Rockzy
Rockzy

Reputation: 65

I re-observed your code to get the font correct. You want to change the font-size from 32px to 20px, right?.. Ok, here's what to do. You can select the class of the element in the style sheet. In this case it is in component.css. In there change the font-size of heading-primary from 2rem to 1.25rem. It will change the size of 'Location' from 32px to 20px..

Change the font-size from this

.heading-primary {
    font-family: "Monument Extended";
    font-size: 2rem;
    line-height: 150%;
    color: var(--color-secondary);
}

to this

.heading-primary {
    font-family: "Monument Extended";
    font-size: 1.25rem;
    line-height: 150%;
    color: var(--color-secondary);
}

Size rechanged

If this is not your problem..don't hesitate to say

Upvotes: 1

Rockzy
Rockzy

Reputation: 65

Please check your code. In the _reset.scss you have called body tag at two places and called the same font-size fucntion at two places with two sizes.

body {
    //1rem = 10px 10px/16px = 62.5%
    font-size: 62.5%;
    //will increase or reduce the font-size based on the screen size in the future
}

You called it here with font-size and

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

You also called it here.

Try correcting it and if it stills get error. Lets try finding another.

Upvotes: 1

Related Questions