You can simply remove target="_blank" from all the images, and the larger image will open in the same tab. The back button would then take you back to the thumbnails.
Or you can look for a script with a better UX. As I mentioned before, there are plenty to choose from, mostly using JavaScript. If you don’t want to use a JS version, then search for something like “Pure CSS gallery lightbox”.
Thank you.
You have other problems with your site that are going to break it on normal sized screens, phones, and tablets.
You have manually forced the content to appear in the middle of YOUR screen when your browser is open at full screen. This means anyone whose screen is smaller than yours or who doesn’t open the browser at full screen size (so they can see other programs next to it, or other sites at the same time in a different window) will see it pushed over to the side.
To get this effect you have wrongly set the body to have a padding-left of 25em, to push it across to the middle, with a min-width of 58em
Then you have put your content in a div set to be a fixed 72em. All to make it fit your screen.
What you should have done to centre the content div is have no width or padding set for the body, and set auto margin on your content div and a min or max width on content div as well, which will autmagically place it in the centre.
You are falling into the beginner’s mistake of designing and then viewing your design at full screen, and forcing it to match your particular screen size - which I calculate to be 1800pixels wide. So when I go full screen on my 1920 pixels wide screen, it is offest to the left, but in a browser window of say 1600 or 1400pixels width it is offset to the right and scrolling left and right is required to see the content.
Resize your browser to different widths to see how others will view your site.
The site seems responsive to me.
Same here. I tried it on an iPad and it functioned perfect.
Well, perhaps almost perfectly would be more accurate.
Your header is a single image (not good practice to post text as an image), and at small screen widths (mobiles) it becomes too small to read easily. But I agree that it is generally responsive. I think @Dr_John must have been viewing an earlier version.
So how would I fix this?
I just tried it on my iPhone 8+ and it works.
Remove the text from the image and inset it as text, using <h1></h1> heading tags. You would then use media queries to adjust the layout where necessary. For example,. at narrow screen widths you might want to place the heading below the image, or even not display the image at all.
As it stands, your 1000px image is also being stretched at wider screen sizes, so you also need to decide how you want to handle that. Do you want to set a maximum width on your page, so it can’t extend beyond that width, or do you just want to centre the header, irrespective of screen width?
You can use web fonts to serve the fancy heading font if you want, but it’s important to have it as text. Search engines (and screen readers) can’t read images, so will be missing out on what you would presumably consider to be important information.
It depends on your definition of “works”. On my phone, which has a screen width of a little over 2 inches, everything is so small it is hard for me (with good eyesight) to read. What about somebody who needs to set the text size larger? You can’t do that with text in an image.
I do have one question. when i first started this. i had white space on both sides of the page. but now since it was made responsive. i lost it . can i not have white space on both sides?
That’s what I meant by setting a maximum width.
Try changing this:
#content {
border: 0.125em solid black;
border-radius: 1.5625em;
/* height: auto; /* DELETE Me. */
/* width: 72em; /* DELETE Me, OR consider max-width: */
margin:0 auto; /* ADD Me to center the outer container, #content, in the window. */
}
to this:
#content {
border: 0.125em solid black;
border-radius: 1.5625em;
max-width: 72em;
margin:0 auto;
}
Oops - I was looking at rebuild, not rebuild2 - I didn’t notice there was a new version.
Is there away I can add a link from the full picture saying Back to Gallery, instead of target=“_blank” ?
What do people think I should go with. target=“_blank” after clicking thumbnail or not.
Yes, but the picture needs to be nested in an html page so you can add an anchor to the html.
If you’ll give me a minute I’ll put an example together with your code and content.
Okay, I’ve added pages for the full size images.
The pages include an <h1> tag for the image titles and a return link below the images.
So your original gallery page gets these changes in the html. Notice how the anchor directs to the relevant html page now.
<div class="responsive">
<div class="gallery">
<a href="photo-01.html">
<img src="thumbnails/photo-01.jpg" alt="Eastern Phoebe Series #1" width="395" height="296">
</a>
<div class="desc">Eastern Phoebe Series #1</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="photo-02.html">
<img src="thumbnails/photo-02.jpg" alt="Eastern Phoebe Series #2" width="395" height="296">
</a>
<div class="desc">Eastern Phoebe Series #2</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="photo-03.html">
<img src="thumbnails/photo-03.jpg" alt="Eastern Phoebe Series #3" width="395" height="296">
</a>
<div class="desc">Eastern Phoebe Series #3</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="photo-04.html">
<img src="thumbnails/photo-04.jpg" alt="Manitoba red squirrel" width="395" height="296">
</a>
<div class="desc">Manitoba red squirrel</div>
</div>
</div>
Then you will set up a new page for those links which contains your full size image.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/screen.css">
<title>Photo-1 Page</title>
</head>
<body>
<div class="img-wrap">
<h1>Eastern Phoebe Series #1</h1>
<div>
<img src="images/photo-01.jpg" width="2100" height="1575" alt="Eastern Phoebe #1 Photo">
</div>
<div>
<a class="return" href="photography.html">Return to Gallery</a>
</div>
</div>
</body>
</html>
You will notice some new html classes in that page, they got set up in your screen.css as follows
/*--- Single Image Page Styles --*/
.img-wrap {
width:90%;
margin:auto;
text-align:center;
}
.img-wrap h1 {
margin:.75em 0;
}
a.return {
display:block;
margin:.75em 0;
text-decoration:none;
font-size:1.2em;
font-weight:bold;
}
I have also optimized your images for the web now by saving them at 65% quality, and you can’t even hardly notice a difference.
The four full size images now weigh around 250-300 kb, all four of them together are now 1.11mb. That is less than half the size of just one of the previous images. 
The thumbnails were optimized also.
Here is the complete working package in a zip file.
photo-gallery.zip (1.2 MB)
There are some other improvements that can be made on your gallery page too. Such as setting your logo image as a background image in the CSS.
Oh, I also set the viewport meta tag up on your gallery page and all sub-pages. That is for mobile devices to scale the page correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope that Helps
This is great. I do have one question. Is there away to put return to gallery at the top to the left or right. Why I ask is because you can see it at the bottom untill you scroll down.
Yes, you can float them left or right.
Or we can use flex or display table to set up rows for the link and the header text.
Let me make some changes.