Validation help, please

[OBXjuggler]

please see

https://jigsaw.w3.org/css-validator/validator?uri=forallthetime.com%2Fnature2%2Fstyle.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

dont understand this at all

please pass on the correct code and provide me with what was my problem

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fnature2%2Findex.html

not much here, kindly explain

i am aware there is a space in my image src

and

https://forallthetime.com/nature2/index.html

here i am missing some, but not all, images… no clue why

its fine in my text editor, before FTP

sorry if its obvious and i missed something silly

again, please pass on the proper code and coment how you fixed my issue… i want to learn

MANY THANKS

[tracknut]

In the first case, you’ve got your @media blocks inside-out with your CSS. The CSS styles go inside the @media section, not the other way around. So re-organize the lower half of your CSS like this:

(stuff above here remains the same)
/* grid styles ------------------------------------ */
.main {
  display: grid;
}

@media (min-width: 600px) {
	.main {
	     grid-template-columns: repeat(6, 1fr);
	}
	
	.info--1 {
	    grid-column: span 2;
	    grid-row: span 2;
	}
	
	.info--2 {
	    grid-column: span 2;
	}
	
	.figure1 {
	    grid-column: span 3;
	    grid-row: span 2;
	}
	
	.figure6 {
	    grid-column: span 2;
	}
	
	.figure7 {
	    grid-column: span 3;
	}
}

Regarding the question about images, I can’t tell what the actual image file names look like on the server, but I’ll bet there’s a disconnect somewhere with the name in the link, with all the various upper and lower case letters, and the actual spelling of those file names on the server. List out the file names on the server and compare very closely to make sure there isn’t a typo (suggestion: use all the same case, don’t use spaces or other weird letters, or you’ll continue to have this problem in the future).

[m_hutley]

Error: Stray end tag a.

From line 21, column 7; to line 21, column 10

What it says on the tin. You’ve got a </a>after your header’s h1 tag (line 21) that doesn’t match anything.

@OBXjuggler

here i am missing some, but not all, images… no clue why

its fine in my text editor, before FTP

All but one of these 404’d. Did you upload the pictures to the server? Do the filenames actually have underscores, or is that your web editor trying to be clever with open and close parentheses?

[OBXjuggler]

@m_hutley

All but one of these 404’d. Did you upload the pictures to the server? Do the filenames actually have underscores, or is that your web editor trying to be clever with open and close parentheses?

i used ftp filezilla to forallthetime.com/nature3/index.html

i dragged and dropped my image folder and index.html and style.css fom local (left) to remote(right)

i also renamed the images in their folder to simple .jpgs

eg 1, 2, 3 etc and a, b, c etc

my former jpgs were long, underscores… a mess

it looks perfect in VS Code…

could this be a hosting issue for godaddy? (which i use)

i appreciate your time and trouble

thank you for helping me!

[PaulOB]

You have the image path as here relative to root:

/IMAGES/1.jpg

e.g. https://forallthetime.com/IMAGES/1.jpg

But it is here relative to the nature folder:

https://forallthetime.com/nature3/IMAGES/1.jpg

[OBXjuggler]

@tracknut

/* grid styles ------------------------------------ */
.main {
  display: grid;
}

@media (min-width: 600px) {
	.main {
	     grid-template-columns: repeat(6, 1fr);
	}
	
	.info--1 {
	    grid-column: span 2;
	    grid-row: span 2;
	}
	
	.info--2 {
	    grid-column: span 2;
	}
	
	.figure1 {
	    grid-column: span 3;
	    grid-row: span 2;
	}
	
	.figure6 {
	    grid-column: span 2;
	}
	
	.figure7 {
	    grid-column: span 3;
	}
}

i added the code provided above

forallthetime.com/nature3/styles.css

down to 1 error

https://jigsaw.w3.org/css-validator/validator?uri=forallthetime.com%2Fnature3%2Fstyle.css&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

not sure where my problem is except for my media queries

Warning (1) main is a CSS hack

help me, please

the HTML validator is fine

[tracknut]

That’s a mystery to me. If I copy your css directly, either into a file to validate or pasting it directly into the validator, it validates fine with no errors or warnings. So I’m not sure what the issue is. Maybe cut/paste it a second file, just to see if there’s something funky in that file that’s causing a problem with the validator?

Maybe someone else can spot the issue…

[OBXjuggler]

Thanks, Paul

BINGO!! it works!

MANY THANKS!

interesting… /IMAGES/#.jpg worked fine on other projects…

not sure what you did for me…

breifly expain

[m_hutley]

Starting a relative URL (Relative meaning its not "http://… etc etc, but relative to the current page) with a / translates as “go to root”.

Your page is at http://forallthetime.com/nature3/index.html.
the root of that is http://forallthetime.com/.

So “/IMAGES” means http://forallthetime.com/IMAGES, NOT http://forallthetime.com/nature3/IMAGES.

Removing the leading slash makes it relative to the current directory, so “IMAGES/#.jpg” becomes http://forallthetime.com/nature3/IMAGES/#.jpg.