I'm a graphic designer working on my portfolio site, hoping to get a front-end developer job with it as a practical showcase. Here's the link to my site: vinceshao.com
The problem I have is that why images on iPhone 5 cannot exceed its device width, while I set the widths of my images as 200%. It looks as I expected on Chrome's dev mode, yet not on real device. Though I haven't tested other devices, I guess other ones with width smaller than 320px would have same problems?
These are screenshots from iPhone 5
And these are screenshots from Chrome's dev mode
Here's the relevant html snippet
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1">
<div class="landing-title-container" >
<h1 class="landing-title">Let's Make Impacts</h1>
<img class="landing-img landing-front" src="/materials/landing.png" alt="landing">
Here's the relevant sass snippet
overflow: hidden !important;
Feel free to check my code with Chrome's dev mode if these snippets are not thorough enough.
Thanks for your help!!