I adjusted as much as I could the css for the large images, at the moment only for the first (Bruges) and the last but one (Alberobello) but I’m still not happy with the way the imagea behaveas they gets smaller. I guess it has to do with not quite knowing how to deal with podsition:absolute with all corners on “0” to start with.
<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>View Large Image</title>
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<style>
body {
background-color:#143D29;
}
img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; /* will refer to the position lengths */
padding:10px 10px;
border:25px solid #00371C;
}
@media screen and (max-width:1050px){
img{ width:90%}
}
@media screen and (max-width:500px){
img{ width:80%}
}
</style>
</head>
<body>
<img src="AlberobelloB.jpg" alt="">
</body>
</html>
Another problem is that I don’t understande why the last images in the bottom row are higher than the first of the row when they all have the same physical mesurements and the same width/height in the css.
the 234x156 is the measuremnets of the thumbnails in the bottom row. the 933 x 700 are the larger images .
If you look at the name of the pictures the ones with a trailng “S” are the small; the ones with a trailing “B” are the big.
The thumbnails in the html are all with the reduced size (unless my head has gone beyioond what I thought…). The images in the redirected files that conyain the single large image have pictures wth trailing “B” to be diaplyed when you click on th thumbnails.
I guess there is something so obvious that I can’t see it! Can you expand your comment, please?
LATER
Yes, I am going blind!!! I had put the large images in the html instead of the smaller ones! And I’ve been looking at this for THREE days! That problem solved!
Now what about the responsive code for the larger images: code above.
The screen-shots I posted are of the information I see when I click each of those “thumbnail” images in the last row and view image info. Looks to me as if you’ve accidentally used the full-size images in there instead of the thumbnail images.
Edit: Ninja’d - the penny dropped while I was typing.
This is the page that opens when you press the very first thumbnail. Because the large images did not display centrally in a couple of browsers, I was given very kindly some code to solve that problem based on
img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto; /* will refer to the position lengths */
padding:10px 10px;
border:25px solid #00371C;
}
Nowm the porblem is that I was not very successful in the media quries and wonder what I can do to make it fully responsive,
If I’ve understood you correctly that you’ve only added the media queries to the first and penultimate images, then I don’t see a problem. They seem to respond OK to different viewport widths.
(I do think you’re making a huge amount of unnecessary work for yourself by using embedded CSS in each page, rather than an external stylesheet, but presumably you’ve already been told that.)
You can use the same CSS document you use for the rest of the site and just add the styles to that.
Or if you really want to keep them separate for some reason, then yes, create a new stylesheet for the photogallery, including the large images.
If you add a class to the <body> tag on the large image pages, you can add that class into the CSS rules, so that you only apply that background colour and image rules to the appropriate pages.
Presumably not a different colour for each of those 50 images, but a selection of background colours. In which case you can give the body for each image a class of “blue”, “green”, “red” or whatever, and set the colour for that class in the CSS. (I would not normally suggest using a colour as the class name, in case you want to change the colour at a later date. But in this instance, it strikes me as the easiest solution. You can see at a glance which colour the page is using, and if you want to change the colour on a single page, you can just change the class.)
originally the large image was launched directly from inside the main html. Because of the positioning in certain browsers I looked for an answer in Sitepoint forums and came up with the code that you see in the first post of this thread
No, now everything has been sorted out with the code in the first post. Before, when those additional pages did not exist and the large images were called directly from the main html, then yes different browsers dipslayed differently.
Now, it’s just a chat with TechnoBear about what could be an alternative suggested by him.
