Font-size trouble


i have been a this for a while :frowning:

please see

i am trying to increse the font-size for ALL the white text throught my project, specificaly the p elements

i tried

.amenities-nav p {
      font-size: 30px;

i would think this would be simple

please pass on the code and explain how you fixed my problem

thank you

.amenities-nav p {
      font-size: 30px;

This will only apply that font-size to any paragraphs within an entity with a class of amenities-nav like

<div class="amenities-nav">
    <p>This font-size will be 30px</p>
<div class="some other classes">
    <p>This font-size will NOT be 30px</p>

If you’ve got a common class which sets the color, set the font-size there. Though that’ll mean you’ll need to remove the other font-size settings throughout your css.


does nothing at all :frowning:

tried adjusting my footer font-size, simple, but that wont go through either :frowning:

nothing i adjust goes through

help, please

There is no element with that class on the page you linked, so for that reason it does nothing.

So you either add the class where you need it, or you target another class that does exist on the elements you want to target, or create a new class, apply it to the elements and target with CSS.

Though if this is the base size for all body text throughout the project, you may want to target the p element directly. Though there may likely be other more specific selectors already.
Ideally you want to get CSS right from the start so making small changes to specific parts are easy.

I would also recommend using relative units like em and rem for font sizes, that can make life easier, though it won’t change how selectors and specificity works.


i dont know how :frowning: but it worked! for the amenities page… i will follow up with the other pages soon!

does it have to do with where in my code is in my style.css?

head scratcher!

well said!

i will come back if needed :slight_smile:


It worked for your ‘Amenities’ page because that page does has a <div> element with class attribute amenities-nav and child <p> elements.

1 Like

Yes, I know. But that’s what you have in your css, and I told you that it didn’t work because you didn’t have that markup in your html.

I also said if you have a common class which sets the color, set the font-size there. Didn’t think I had to go find it for you but I did.

Change this:

p, .intro {
    color: white;
    font-family: "Glass Antiqua", cursive;
    font-size: 22px;
    margin: 0 0 1rem;

to this

p, .intro {
    color: white;
    font-family: "Glass Antiqua", cursive;
    font-size: 30px;
    margin: 0 0 1rem;

Though I will add that setting font sizes in pixels is outdated and has accessibility issues. Using a variable sizing scheme (like em/rem) will allow the user to keep control of their font size.


i thank you

sorry if i irratated you :frowning:

i know my media queries need attention :slight_smile:

i have successfully changed all pages to font-size 2rem :slight_smile:

small devices, still small font-size

works fine in dev tools…

not sure why… cannot make that work

i am now using rem for this

listen, if you have addressed this (small screen font-sizes), my sincere appologies

if you have addressed this i need more clarity

i ask for your patience, please

i hate to bug you

again, thanks!

It’s probably not a good idea to have smaller fonts on a small screen (except maybe large titles).
People need to be able to read the text, so keep body text at least as big on small screens.

ok, progess :slight_smile:

please see

here my font-size is bigger on small screen, in this case my iphone as desired :slight_smile:

here my font-size is smaller on small screen, in this case my iphone

isnt there a way to adjust my style.css in the head to reset (?) or refresh… can i add someting?

i tried index.html <link rel="stylesheet" href="style.css?1234">

did not work

anyway to make with its appropriate font-size work on my iphone?

if its cool, maybe try this on your devices?

tell me what you see?

and again… thanks!

“Try using the following CSS code: css body { color: white !important; font-size: 30px !important; } This code will change the font color and size of all text on your site to white and a 30px size. Using !important ensures that this style will override any other styles applied to text on your site.”

This is a terrible idea. !important should be used as a last resort. Finding the root cause of the disconnect is the better approach.


Unfortunately, I don’t have an iPhone, and my Android and the emulators are all showing the same exact display. Can you screenshot it to show us what you’re seeing?

Both links look the same size on an iPhone.

font-size: clamp(0.875em, 3.34vw, 1.125em);

Generate linearly scale font-size with clamp()
viewport width: 360*1920px

I think the variable font sizing like this is fine when you have big, bold headings that just won’t fit on a small screen. But I would avoid this for body text, as you don’t want that getting smaller on a small screen.