Hello,
i have been a this for a while 
please see
https://forallthetime.com/BUCK-ISLAND/index.html
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>
<div class="some other classes">
<p>This font-size will NOT be 30px</p>
</div>
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.
thanks
does nothing at all
i
tried adjusting my footer font-size, simple, but that wont go through either
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.
BINGO!
i dont know how 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 
THANK YOU
It worked for your ‘Amenities’ page because that page does has a <div> element with class attribute amenities-nav and child <p> elements.
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.
ok
i thank you
sorry if i irratated you
https://forallthetime.com/BUCK-ISLAND/index.html
i know my media queries need attention
i have successfully changed all pages to font-size 2rem
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
please see
https://forallthetime.com/BI-T/index.html
here my font-size is bigger on small screen, in this case my iphone as desired
https://forallthetime.com/BUCK-ISLAND/index.html
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 https://forallthetime.com/BUCK-ISLAND/index.html 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?
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.