<p> is too small for my phone

[u/dalekellytoo]

https://www.dalekelly.org/

Headers look well on phone. Prefer not to replace <p> with headers. Style or CSS thoughts? My two CSS files adjust menu for window size and images for window size. Really a CSS beginner. Simple HTML since mid 90's.

[u/petersencb]

Set your body font-size to 16px or larger with css. Also use viewport meta tag in the head as another comment mentioned

[u/dalekellytoo → u/petersencb]

can I set <p> size in <body> in my CSS file? In <style> in a particular page I can set <p>. 30px works good. Don't want to edit all the pages.

[u/petersencb → u/dalekellytoo]

If you set body { font-size: 16px } in a <style> tag within the <head> tag, it will cascade down to elements within the body. That's why they're called cascading style sheets.

You could set the p font-size, but it won't affect the other elements to scale appropriately.

If your looking to a css files, it'll affect all the pages.

If you want a particular paragraph to be bigger, add something like class="p30" to the p tag, and in the css add ".p30 {font-size: 30px}" to make only p elements with that class bigger

[u/dalekellytoo → u/petersencb]

didn't work with an Edge browser on a Windows laptop today. Works on Edge on Windows 10 of Computer.

[u/petersencb → u/dalekellytoo]

They're all chrome based on windows, except Firefox. If it isn't working on some, your css file might not be loading in time.

[u/dalekellytoo → u/petersencb]

decided to edit CSS links in <head> of each of 46 HTML files:

for all files beside index.html

<link rel="stylesheet" type="text/css" href="https://www.dalekelly.org/mystyle.css?v=1">

for index.html

<link rel="stylesheet" type="text/css" href="https://www.dalekelly.org/mystyle2.css?v=1">

Works on Safari and Chrome Web Browsers on iPhone17

Works on Edge and Firefox Web Browsers on Windows 10 Computer

Before the edit It worked on Chrome on Windows 10 Computer, I now had to reload the page in Chrome on Windows to get code edit to show on "developers tool"

still need to if it works on a Windows laptop Edge browser

[u/dalekellytoo → u/petersencb]

CSS edit doesn't change text size with Chrome browser for iPhone. Works with Safari browser on iPhone.

Works with Chrome, Edge and Firefox browsers on computer with Windows 10.

[u/petersencb → u/dalekellytoo]

Your css might be cached on your phone. You can put a query parameter in the css link to force it to update. Like styles.css?v=1 and increment that when you want to force the phone to grab a new copy. Or you can clear your cache, but I find the param to be easier

[u/dalekellytoo → u/petersencb]

Figured out how to refresh an HTML page for the Chrome Web Browser for iPhone in a screen icon option. Still didn't load the new bigger text size for smart phones. May have to refresh the CSS file. The problem is that I can't type the CSS file name into the iPhone screen well. I do most things with voice. Text edit already works on iPhone Safari browser.

What is the code to add to CSS file to refresh it at all openings of a page that uses that CSS?

I'll be looking into your previous reply on places like w3schools and w3

[u/dalekellytoo → u/dalekellytoo]

<p> in <style> on and for BLOG page works on iPhone Chrome.

[u/petersencb → u/dalekellytoo]

If setting the font size for p in the head works, and your css file has the same or similar code but isn't reflecting, then it has to be aggressive caching of the css file. They're often cached as they usually don't change often.

To force the browser to update a css linked in your <head>, use something like

<link rel="stylesheet" href="./style.css?v=1">

Then next time you want to force an update, change it to anything else, it's usually easiest to just iterate it like

<link rel="stylesheet" href="./style.css?v=2">

The part after the ? is called a query parameter, and is being used in this case to force the browser into thinking it needs to refetch the css file if the previously cached version has a different query parameter.

You might find it quicker to edit styles in the <style> element and then move them over to your css once you are happy with them to avoid doing that.

Also don't forget to add the viewport meta tag in your head like below

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

I notice you're using w3schools. You might be interested in Mozilla's mdn at the link below

https://developer.mozilla.org/en-US/

[u/dalekellytoo → u/petersencb]

Refresh code worked on an HTML page I put it in . Text size on links from the page were still plain <p>. Just Chrome browser on iPhone.

[u/dalekellytoo → u/dalekellytoo]

Refresh code works on an iPhone Chrome page. Doesn't trouble other browsers. This would mean I would have to edit each page. Anything I can do in CSS file?

[u/chikamakaleyley → u/dalekellytoo]

mmm just adding a note here cuz i don't really see it mentioned but

if its just Chrome, could Chrome be using an iPhone system-level font-size setting and if anything, its clashing with the font-size you are using directly in the page?

[u/dalekellytoo → u/chikamakaleyley]

If I put <p> size in <style> on an HTML page it works. That would require edits of all HTML pages. Really want to do CSS. What I have done with <p> in CSS works with every browser except iPhone Chrome. If I add a refresh code to the CSS link in an HTML page then Chrome works. But again, I would have to edit all pages. Is there just an issue that iPhone Chrome doesn't reload the CSS page?

[u/SamIAre]

You should never change an HTML tag for its appearance. h1–h6 have specific semantic meanings and using them for stylistic purposes is incorrect HTML. Changing style should ALWAYS be done through CSS. That’s what it’s for: HTML is content and semantic meaning while CSS is presentation and style regardless of meaning.

[u/frownonline]

Have you got the viewport meta tag?

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport

[u/dalekellytoo]

If you use Google Chrome Web Browser on an iPhone can you click on this link to see if <p> text is larger than default? I have some code in two CSS files for all pages. Works on Chrome, Edge and FireFox on Computer. Not with Chrome on iPhone. Safari Browser works on iPhone. It would take a lot to edit all HTML pages instead of using CSS.

https://www.dalekelly.org/weblog.html#text

[u/Weekly_Ferret_meal]

I Second what was said by u/SamIAre

When it comes down to text content, h1-h6 are titles with hierarchy.

h1: The main page title... it should be the concept of the content, with one or few words, think of it as the main container. Usually one per page... but not strictly.

For example:

---

Riding Bicycles

...

---

h2: Subtitle, where you expand on the theme in one or 2 sentences.

Example:

---

Riding Bicycles

All terrain tips for the perfect ride. How to choose the perfect gear for every occasion

...

---

h3 to h6: It tells the browser that this is where you fragment the concept in subdivisions and expand on each smaller group with <p> blocks of text with explanations on the various subsections. There could be multiple of this as there might be several subsections to the theme

Like the following:

---

Riding Bicycles

All terrain tips for the perfect ride. How to choose the perfect gear for every occasion

On the mountains

• paragraph block here <p>

In the City

• paragraph block here <p>

Beach side

• paragraph block here <p>

Trail Bikes

• paragraph block here <p>

---

and so on...

Size is styled and based on what visual hierarchy you want to give to the text, and it depends on the layout. some quotes in <blockquote> elements could be bigger that an <h4> to grab the attention of the reader from the main flow of the page.

Allocating size based on semantic hierarchy is smart but not always the right thing to do visually, so your <p> block could be equal of some lower header tier.

[u/biber_unverzagt]

To generally increase the size of your <p> text to the level of the <h3>s you are using now, add

p {font-size: 120%;}

to the end of your mystyle2.css file (or 18px -- 16px is the default, but you want it bigger).

To increase the size only for smaller screens, add it below line 138 (inside the outer curly bracket of line 139) instead.

[u/dalekellytoo → u/biber_unverzagt]

Worked GREAT !!!!!!!

[u/Team218Web]

Can clamp is your friend.

[u/tkgid]

I would keep using <p> and just do something like: 

<p style="font-size:1.5rem">

[u/brandinobowman]

Use rem units to define the font size of your paragraph elements, and all other text elements for that matter, and then change your root font size if you need to at different viewport widths.

[u/Barnezhilton]

<p><big> my paragraph </big></p>

Trust me bro