Safari displaying codepen project differently

#1

Hey everyone,

I’m working on the tribute page project and could use some help. I’ve made a lot of progress but it seems like Safari is displaying things differently than other browsers and I’m not sure why.

Link to project:

In chrome and firefox, the movie poster images at the bottom of the page are displayed in two rows with two of the posters in each row (this is how I want them to appear). But in Safari they display as one poster per row and are aligned to the left.

I’m guessing this has something to do with how I used Bootstrap but I’m pretty new to all this so I can’t say for sure.
Any ideas what this could be?

#2

Cross browser testing/compatibility is definitely an issue that has to be dealt with, but I wouldn’t put this as a priority if it looks fine on Chrome and Firefox, especially if this is your first project. Each browser will have its quirks.

The reason why the same code may appear differently on the various browsers is because the companies/organizations behind the browsers choose to prioritize and implement standards at different times.

More info:

#3

I notice you are including both Bootstrap 3.3.7 and Bootstrap 4 in your CSS header. Don’t mix and match versions, pick one.

If you remove Bootstrap 3 and hit the Run button, the problem disappears (although now there is a problem with the text not having enough padding/margin. I think it’s because .well doesn’t exist in Bootstrap 4).

#4

Thanks for your responses!
I removed Bootstrap 3 and added a margin for the text that was affected.
Thanks to both of you for your help and information!

#5