I'm trying to get my pictures to expand with the increased break-points. It works well in RSD, but, after I move the files to the server, the picture no longer changes in size "in production" as I re-size the window. The link below is the current page I am working on (others will come after i get this page figured out). This page currently has 2 versions of the same map on it. I've been trying various settings, so I just left this map in the code twice.

I saw in one tutorial that not all browsers handle the <picture> element the same, but that must be old documentation since my current review of main browsers indicates they all handle <picture> well now.

I'm hoping someone can spot a really dumb error on my part that can solve this problem. Thanks in advance!!

https://carothers-carruthers.com/dormont.html

You could attach the project file (zipped) so that it's easier to see whats going on and advise you

Thank you. Is the attached file what is needed?

If your referring to the Amazon image in the iframe.
Your iframe has a fixed width width ="728" and height height ="90" assigned to it. Change those to a percent.

The Zp file is empty

The map images have a max width set to 200px. That needs to be either a percent or a much larger px amount. You could also set them to max-width:none.

My win-zip file is 74 MB and gets "Internal Server Error" each time I try to load it. It's a zip of my .rsd file. Should I be zipping a different file?

I appreciate the input.

Here's what I have done since Eric's response. I've set max-width to none for all of my break-points and changed the width for each break-point to as large as it will go without losing focus of the map. (again, I am working on carothers-carruthers.com/dormont.html). The map looks great in the RSD preview, but is only a small map once on the server.

I'm baffled when I look at the source code of the 2 versions - RSD preview and "production". For my paragraphs and headings, I have code like this: class="columns small-12 custom-359-small-offset-0 custom-359-small-10 custom-359-small-push-2 column-6 small-offset-0". But for my map, the picture is only in a class that says: columns small-12.

My CSS looks fine to me in RSD, but it doesn't seem to get translated to the server. I have remembered to copy the Foundation, main, and wireframe CSS files to the server also.

I'm very open to other ideas. Thank you.

If you have a Dropbox or similar, you can upload the file to it and let us have the URL. Or, you can upload the zipped file to your domain and give us the URL for that.

A little while ago I checked your site, and the map on that Dormont page was tiny, but now it is large - but unfortunately very blurred and hard to read. That is because of the map file size, which is just 400 px × 291 px. buy on my desktop moniotor it is scaled to 1 170 px × 851 px. It would be better if you are able to provide a larger image.

It would be interesting to see your site when it is done, as I have a couple of Maxwells among my ancestors as well

Manually delete all of the old files off the server. There might be an issue with one not getting overwritten.

Thanks, everyone. Here are my latest attempts:

I deleted off the server the existing dormont.html, css, and image of the map files. Then I reloaded again off the RSD extract. I also put my zipped .rsd file at this address - carothers-carruthers.com/zip-files/car-car.zip

Inger, how did you see that big blurred image??? I had it on my dormont.html page in RSD a little while when I was setting the max-width break-points to none. So I was getting it in RSD preview, but I never got anything other than the small image when I went on the page directly through a browser. Could it be the Flexbox > Align-Self > Stretch? Maybe that should be auto or center? I'll try playing with that next.