I am having trouble with my card images in the new update. everything worked fine in v4, i,e. the first five cards are fine. The sixth image looks fine in the preview bit reverts to a thumbnail in the live server.
The best advice I can give you on this is to look at the code itself. It tells exactly where and what your issues are on this. You’ve got so much style code in your page that should be in a CSS file. That alone would help you narrow things down. I would highly suggest you get all that code into some CSS classes you can reuse on things like your cards.
I opened the source code of just the last two images and wow what a major difference in how you set them up. I would truly start there. Might help to copy the last 2 sections of code into an external editor that you can see the color codes of like Atom. Just do that and save the file to your desktop so you can either get back to it again or delete it easily. That will trigger the color coding for you.
Then take a look at the differences and you should be able to figure out what is wrong there without too much hassle I think.
Thanks for looking and your suggestions. I have compared the styles. reset the styles. copied the styles. Deleted unused styles? Everything was fine until the update and then I added a new card.
Pulling the CSS and putting it in a text editor for comparison is a good idea. I have been trying to fix it for so long. I am going code blind.
Thank you again
I just duplicated card #5. I updated my server and the duplicate looked fine in the browser. I changed the image with one of almost the exact same size. 31kb and 37kb. It is doing the exact same thing in the browser. No classes or properties have been changed. I am at a loss.
https://www.webdevhill.com/portfolio.html
Thank you for any help.
Jeff
I fixed it. The folder img was in the wrong folder on my server. DUH! I hope this common mistake helps someone. I was thinking it was the latest version update or the wrong class was assigned.
Sometimes you get so frustrated that you miss the obvious. I am embarrising myself for the benifit of others.
Happy coding,
Jeffrey Hill.
Haha ain’t that the truth! Glad you got it worked out. Also keep in mind when you update a site from one version of Bootstrap to a newer one, sometimes the code changes for things. Cards were one of the major changes from Bootstrap 3 to 4, pretty much rewritten so that will many times be the issue too.
Another good practice when doing things like you are with image links etc. is to make each of them the same. Same classes, same everything other than links and images. Image sizes being the same also helps keep it looking more even on the page. Like you did with the dog photo though, getting it centered so it filled the same space is a good idea too.
One more thing to consider is you really shouldn’t add height or width to images if you have on real reason to do so. It breaks the fluid responsiveness of the site which is already built into Bootstrap. Making your images the same size or even adding a background color to fill the space of images that are smaller helps a lot too.
Have fun with the rest of it 
It’s amazing (and frustrating) how the “rules” change on how to properly build websites. Five years ago, defining the height and width inline was considered best practice because it reserved a “space” on the page for the image to occupy once it loaded, thus preventing the DOM from having to redraw the page entirely from scratch after all the images downloaded. This made the page load faster, and thus provided a (slight) SEO boost.
Then along came responsive design, and an endless numbers of screen sizes, making it impossible to define fixed heights and widths, and all of a sudden defining fixed heights and widths was now incorrect, and could hurt SEO.
It’s an endless game of whack-a-mole with Google, trying to keep up with how they want websites built in order to rank highly on their precious SERP. You’d think the website designer would have a say in it, but no… we’re constantly jumping from one hotplate to the next trying to keep up with what Google wants so our client’s websites will rank well. SO FRUSTRATING!!!