replace my files with yours?
Save a copy of your files somewhere just in case!
Then you can merge mine in to take their place.
That way my files don’t over write yours and you can revert back if needed.
1 Like
Do you know how to optimize your images now?
I do it with IrfanView by saving the images at 65% quality.
Your large images are loading much faster now but they still don’t need to be 2100 x 1575.
You could back off to around 1500 x 1125 and that would help even more.
Ok> I’ll do that.
Those are floats snagging.
The gallery layout needs to be inline-blocks or display table.
reduced the size of the big pictures.
http://www.charismacommunications.ca/rebuild2/photography.html
You’ve got a float snag problem with thumbnail images being a different height.
Instead of floats you can use inline-block with these changes…
.main {
margin: 0 0 .75em 0;
text-align: center;
}
.responsive {
display:inline-block;
vertical-align:top;
width: 24%;
margin: 0 0 .75em;
padding: 0 6px;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 48%;
/*margin: 6px 0; delete this*/
}
EDIT: Removed margin rule from media query
Yes the size will work, but it’s still too heavy.
Photo-04 weighs 1.56mb.
After saving it (for the web) at 65% quality I get it down to 183kb
What do you mean weighs
The file size
1000 kilobytes = 1 megabyte
That’s why your images were loading way too slow earlier. Your also wasting your visitors bandwidth by making them download massive images. Trust me, they will leave your site.
Hover over the image I posted above and read the specs at the bottom, 183KB.
Now see how much that image weighs on your computer. 1.56 mb
A couple of ponderisms:
- Are browsers consistent with float handling?
- Applying float makes a block element display inline or inline- block?
- How to test if inline or inline-block?
Edit:
I think an inline background-color will not display because the element cannot have height. Inline blocks can have height and therefore will display a background-color.
All current versions of modern browsers should be consistent with following float specs.
IE6 had a lot of float bugs and 7 may have had a few. I don’t remember IE8 giving any major problems.
Float is a block level with it’s own set of rules that differ from normal blocks. If you were to float a <span> (inline element by default) it would then become a block (and it could accept dimensions).
An inline can have a background color and it will expand with x & y padding. Your correct though that it can’t accept dimensions. An inline CAN have side margins but NOT vertical margins.
Inline-block can accept ALL margins, paddings, and dimensions just like a block but it will be laid out like an inline element. It’s the whitespace nodes that can make it difficult to work with when you have line breaks in the html. If the whitespace nodes cause problems in your layout then it’s easier to use display:table or flex
EDIT:
In the case of the floats snagging in the OP’s page, that was actually correct behavior of the floats. They would only drop and clear if you told them to with the clear property.
Had they all been exactly the same height there would not have been any snagging.
2 Likes
As the term float implies, floats also rise to the top when they have the opportunity. I tend to think of left or right as a current in the water that also pushes the float in one direction or the other.
I put together a float example that shows some more of the snagging behavior, which is due to that rising to the top effect of a float.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float Snag</title>
<style>
.wrap {
width: 600px;
overflow: hidden;
margin: auto;
border: 1px solid;
}
.wrap div {
float: left;
width: 200px;
height: 100px;
background: red;
}
div:nth-child(2) {
height: 150px;
background: blue;
}
div:nth-child(5) {
background: orange;
}
div:nth-child(4) {
width: 300px;
height: 150px;
background: lime;
transition: width 1s .5s;
}
.wrap:hover div:nth-child(4) {
width: 200px;
transition: width 1s .5s;
}
</style>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div>Watch this float change width, then float up when it finds the chance</div>
<div>HOVER ANYWHERE</div>
</div>
</body>
</html>
4 Likes
So are you happy with the fact that folk like me, who don’t have that font installed, will see something quite different?
When experienced members offer advice here, there’s a reason for it. If you don’t understand the reason, just ask - folk will be happy to explain.
To get around the problem of displaying fonts which are not installed on someone’s computer, we can use web fonts. There are various places which offer free fonts, such as fontsquirrel.com or Google fonts. There are also services which offer fonts at (usually) a very reasonable charge. I used FontSquirrel’s font identifier to try to find a close match for your “1 Finger trigger” font. The best I could see was Slivowitz Italic, but you might find a better match or a free font elsewhere. (Just ensure your chosen font offers a web font licence.)
Edit: I’ve just realised Segoe Script is available to buy as a web font: https://www.myfonts.com/fonts/ascender/segoe-script/#index
So everything looks great. I still have to make the pages for the big images. I do have one question. When I add more pictures, will the one remaining in the middle bottom. will it shift over to the left for the next one?
http://www.charismacommunications.ca/rebuild2/photography.html
It will shift over and make room for another image.
The images are being centered with text-align:center on the parent. Your thumbnails are now inline-blocks so they behave like inline elements.
You could change it to text-align left or right but center will space things out better.
Awesome. I figured that. But thought I’d ask anyways.
1 Like
I’m sure your still aware but there are two things you need to address
- The header fonts need a fallback for users without that font. Or link to an open source font.
- All images still need to optimized before you upload them to your server. I can show you how to do that