As the site isn’t working for me at all at the moment (I’m getting a grid, but the images are 404ing), I’m struggling to image what “nice effect” you get from loading images that are 20 times larger than they need to be, and then relying on browsers to resize them…
I’m loading the images full-sized though. If they really were a few px by a few px my browser would prolly be able to deal with it better.
Anyway if you’re spelling a word out the answer would be something like, only make it as wide as necessary to spell out the word. Some people are going to get scrollbars (in both directions). There’s not really a way around that with your current setup that I can see.
But I’m also pretty unfamiliar with all the new trendy web stuff… I don’t understand what anyone’s doing anymore : )
Then that’s a bad design decision. If a design concept conflicts with the layout choices, pitch the design concept.
But then, that’s why for me the LAST thing I do with a page is add the non-content (aka presentational images)… Of course you’re putting 5,000 images at full size on a page; Excellent way to prevent ANYONE from EVER wanting to visit the site. What’s that going to take to download in overhead alone? 8 minutes in just HANDSHAKING regardless of the connection speed if you are on top of the server (extremely optomistic 100ms request>response>send), like an hour+ real world?
No wonder it locked up on the stupid kitty’s browser.
I could run into problems with that as I will be spelling out a word with the photos. If I ran a fluid width then some people would not be able to read it due to that fact that it had automatically re-sized.
The best width to use is whatever fits on my screen, in my browser window. And since you don’t know what that is, the best thing to do is to make your site flexible so that rather than using any particular fixed width, it adapts to the size of the user’s browser window. (You may want to constrain it with min-width and max-width to avoid it getting silly on very big or very small screens)
Wow, the page makes my browser freeze. Likely the bazillion images.
The code is weird. I’m guessing the negative margins are to make the box wider than its container, but I dunno why the setup is like that. Normally to make a box wider you’d just make it wider. Here, you might need to first set the width to something wider and then increase the negative margins.
Beyond that, I’d want to understand the very strange setup going on here.