One of 7 graphics won't display on mobile

HTML & CSS
1

For the life of me I can’t figure this out. I’ve checked in 4 browsers on my computer - all 4 display all 7 graphics at the bottom of this page: http://goto-hwl.com/BCOA-PROPOSED/index.php

I’ve checked in 3 browsers (FireFox, Safari and Chrome) on my iPhone 6S, iOS 11.2.5 and NONE of them display the 7th graphic.

This is the html for the bottom section:

		<div class="container-indx">
			<div><a href="join-bcoa.php"><img src="images/JoinUs.jpg"/></a></div>
			<div><a href="Construction.php"><img src="images/rescue.jpg"/></a></div>
			<div><a href="Construction.php"><img src="images/awards.jpg"/></a></div>
			<div><a href="Construction.php"><img src="images/BorzoiHealth.jpg"/></a></div>
			<div><a href="Construction.php"><img src="images/national-home.jpg"/></a></div>
			<div><a href="shoppingcart.php"><img src="images/shoppingcart.jpg"/></a></div>
			<div><a href="Construction.php"><img src="images/trophies.jpg"/></a></div>
		</div><!-- container-indx">

and this is the css for container-indx:

.container-indx {
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
	margin-bottom: 10px;
}

Does anyone have any idea what the problem could be?

2

Find this line and make the necessary adjustments:

  </div><!-- container-indx">

Edit:

There are also quite a few other errors and warnings for the page:

https://validator.w3.org/nu/?doc=http%3A%2F%2Fgoto-hwl.com%2FBCOA-PROPOSED%2Findex.php

This is the one causing the missing image problem:

Error : Unclosed element div .

From line 19, column 1; to line 19, column 36

↩<body>↩↩↩<div class="gridContainer clearfix">↩

1 Like
3

That error is caused by the first error you mentioned :slight_smile:

The html comments are not closed properly and thus the closing div is missing. They should appear like this:

</div><!-- container-indx" -->

5 Likes
4

THANK YOU! I looked and looked and looked and didn’t see that. One simply cannot “proofread” one’s own work … spoken as a person who has done print production for almost 40 years. Thanks so much Pal.

1 Like
5

Thanks to you as well, John. For some reason I didn’t get an e-mail notification about your reply. How odd!

Thanks also for the link to validator. I’d forgotten all about that site! I can’t seem to remember anything these days. :slight_smile:

6

That’s where the validator comes in. It does the tedious work for you, finding any errors.
Keep it bookmarked.

1 Like
7

At first I wondered why the validator said this:

Error: Saw <!-- within a comment. Probable cause: Nested comment (not allowed).
At line 56, column 15
:leftwards_arrow_with_hook: :leftwards_arrow_with_hook:
Warning: The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment.
At line 56, column 15
:leftwards_arrow_with_hook: :leftwards_arrow_with_hook:

(The space before the word content is highlighted as the problem) Then it dawned on me that THIS error is caused by the missing – following indx. Am I correct?

As for the alt tags, this is the very beginning of a brand new site which doesn’t go live until the new year and I’m doing things in steps. Mainly I’m trying to learn how to use CSS Grid and Flexbox, which is working on some pages; on others not so much. :slight_smile:

8

I do (or did) have it bookmarked but couldn’t remember what it was called so couldn’t find the bookmark. My memory has gone the way of the dodo bird and the older I get the worse it gets. I also can’t remember the name of the site where one can preview a page/site on various browsers and platforms. It’s driving me crazy because I know I kept an e-mail with a link but because I can’t remember the name I can’t find the e-mail!!

9

Sorry - that should have been Paul NOT Pal.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.