I’m trying to figure out why a new website page’s physical arrangement is different.
The h1 and h2 topics do not appear in my Chrome website, but the images do as I anticipate them to. This consequence is demonstrated by SS. In relation to the photos, they appear much smaller than I would hope.
Each image has a page number words defined below it that even appears in Chrome when the images are disproportionately small in comparison but equal to the h1 and h2 headings. I can’t figure out the issue in my CSS script. I have a feeling that the heading problem also affects the page number text. Does anyone identify the CSS mistake I’ve made? ( The HTML and CSS in my VS Code files are the same. )
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?
Even just in CodePen, heading text is centered and uses Birthstone style as defined. Why do page numbers in Open with Life Server in Chrome appear centered and in Birthstone style in the CodePen?
The script” Birthstone” is not the definition. Does your Chrome page load a style from a location other than a directory?
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 color variations ( I fixed the Page 4 one to show the difference ).
A general rule to remember as you get more into website development is to look at something and the thing that comes right before it.
1 Like
Thank you so much!
Yes, I’ve noticed that the dust in my VS Code almost usually comes from a lost line in the above line. Although I’m trying to make that a attitude, bears occasionally eat you while other times bears eat you.
Regarding the Birthstone style, I am aware that it is not a native or healthy font and that it is specialized to Google, but it does display correctly in headings and has dislayed correctly in different CodePens when there is no url link to the typography in the CodePen HTML code. Was it a coincidence?