Hey everyone,
Working on getting the CSS right on a MERN stack blog site I’ve been making. Frustration ensuing when I set the browser views to different devices. When setting the view on a browser to iPhone X the blog looks great.
When viewing the blog on an ACTUAL iPhone X the blog looks like a nightmare
.What causes this difference and how can I more accurately test different viewports to avoid more nightmare scenarios? Thanks for the help everyone
You can use Chrome Dev tool’s to see what it looks like on different mobile screens. Ctrl + shift + j to open chrome dev tools, and then ctrl shift m, from there on the top you can select different devices. For the images, set the width to 100% and height to auto. That’ll stop it from looking like a nightmare 
. You can also look up different mobile responsiveness tips online.
Thanks GhostRobo. I’ve been using Chrome Dev tools and viewing as if I’m viewing on a cell phone under the responsive viewing options.
I did try your advice of setting heigh to auto and still no luck. I’m going to take a look at bootstrap image classes and see if applying one of those can help!
Yes, Bootstrap. It’s worth it to learn it from the vast amount of things it provides.
I seem to have found a fix by adding a max-height property!
