I am trying to figure out why I have a visual discrepancy in a new web page.
My Chrome browser displays images as I expect them to appear, but the h1 and h2 headings do not. SS shows this effect. They appear much smaller than I expect them to in relation to the images.
There is page numbering text defined below each image that also appears in Chrome disproportionately small compared to the images but proportional to the h1 and h2 headings. I can’t spot the problem in my CSS code. I suspect that whatever is causing the issue with headings also causes the page numbering text issue. Can anyone point out the error in my CSS. (The CodePen HTML and CSS are identical to the code in my VS Code files.)
I created the CodePen to help find the errors (it didn’t help) but it introduces issues that I don’t understand wrt CodePen. The CSS selector for the .scrapbook-frame calls for page-break-after: always;. This seems to work in the CodePen but not in the Chrome browser. Perhaps I’m misinterpeting results, but the border around each image followed by white space in the CodePen display does not appear when I Open with Live Server in Chrome. Why?
Also only in CodePen, heading text is centered and uses Birthstone font as defined. Why don’t page numbers appear centered and in Birthstone font in the CodePen when they do in Open with Live Server in Chrome?
“Birthstone” is not a default font. Is your Chrome page loading a font from a directory someplace?
As for why it’s not centered, your img tag is malformed. You’re missing the > at the end of it, so codepen is trying to interpret your div tag as part of the img tag.
Note the coloration differences (I fixed the Page 4 one to show the difference.)
A rule of thumb to keep in mind as you delve into web development more: If something is broken, look at it, and the thing that comes immediately before it.
Yes, I’ve noticed that when I see lint in my VS Code it is almost always caused by something missing in the line above. I’m trying to make that a habit but some days you eat the bear and some days the bear eats you.
As for the Birthstone font, I realize it is not a native or natural font, being proprietary to Google; however, it displays properly in the headings and has dislayed properly in other CodePens when there is no href link to the font in the CodePen HTML code. Was that a fluke?
If you have installed the font to your own system then that will show to you as birthstone just as you can see your other system installed fonts. No one else can see birthstone though (as explained in a previous thread) which is why you need the link to google fonts or similar.
First time I’ve heard that phrase. But it’s entirely accurate. And it’s definitely something that, frankly, never goes away. With experience, it happens less frequently, and when it happens it tends to get corrected faster, but it still happens. I’ve been doing web development for… 25 years (eugh… let’s not think about that, Marc… moving on), including as a profession during some of that time, and it still happens to me. And I’m sure if you ask any programmer (at least, any one that is being honest with themselves) that it happens to them too.
I understand that I have to link to the Google proprietary font in my web pages. What I don’t understand is why CodePen displays it correctly - despite it not being linked there because the <head> section is not posted to CodePen - in the headings but not in the page numbering I referred to.
BTW: When numbering pages, should I make that a heading as well, despite it appearing (often) at the bottom of my pages?
To provide more information about my issue, I’ve made some ss that show the problem, including DevTools information about the headings and other elements. You can see in the DevTools what the CSS is for the headings, page numbering, and the images.
I’ve looked at this problem until my eyes bleed and cannot ‘see’ the mistake I’ve made.
First image shows headings size relative to image content as displayed by Chrome on my desktop system. This and all images were invoked from within VS Code, Open with Live Server. This first image was a screen without DevTools invoked like the ones below it.
Second image relates to the same issue, adding the DevTools view that includes the HTML and CSS. For reasons I cannot fathom, this image shows the headings in proportion to the image content as I want them to be but only in DevTools and not always in DevTools. The code has not been changed one iota. Obviously there is something that I don’t know. Why would DevTools display the content differently than the native Chrome browser? I got similar results with CodePen, ie, CodePen shows proportions as intended but Chrome in Win 11 on a desktop does not.
Third image shows the same proportionality issue but wrt to page numbering that appears below image content. (FWIW: I use page numbering here only because I’m displaying contents of a scrapbook and want to indicate the scrapbook page numbers.)
UPDATE:
The issue has migrated to displaying other pages that formerly displayed with the correct proportions. Those files are unchanged. The common element is the Chrome browser; therefore I suspect it to be the cause. Pages display as expected in Firefox. What should I check wrt Chrome?
HALLEUJAH!!! I found the problem!
Apparently I had Chrome in a reduced mode and didn’t know it. If you look closely at my screenshots where the proportions are out of whack you will see an icon showing a minus sign in a circle in the title bar strip - to the right of the URL window. I clicked that and changed the value to 100%, now all is well in both Chrome and Firefox. Things are back to normal.
As I said before if you have the font installed on your system then only you will see it. You mentioned before that you had it on your system so it will work for you anywhere that anyone uses birthstone in their css.
That’s probably because you have an error or typo in the html (as already mentioned) and the page number is no longer a child of the background-wrap or you have a typo in the css.
None of us will see the birthstone font unless you link to it as already mentioned.
No, they should probably be in a p tag as its not really a heading but you could argue the p could be in a footer tag.
Can you show us the Codepen you are talking about or is it still that broken one you posted earlier? I can then test it on my Win 11 chrome browser and see what it looks like.
Validate the html:
Validate the CSS
(I saw in your codepen above you have set a max-width of 1500 but added no units?)
