html - When I view my website on my phone it doesn't match what it looks like when I view it with the iPhone template using Safari's dev tools. Why is this? -


so, designed website mobile first approach using safari's developer tools make sure site looked on iphone se, 6s, , 6s plus. when uploaded site godaddy.com looks different. it's displaying desktop version instead of iphone version. there i'm supposed tell browser handle differently on mobile browsers or something? reference here (https://imgur.com/a/7g7gd) looks safari's developer tools on computer, , here (https://imgur.com/a/jhjdq) looks on iphone 6s plus. appreciated!

    <!doctype html> <html> <head> <title>ryan canty - web developer</title> <link rel="stylesheet" type="text/css" href="/users/ryancanty/desktop/portfolio2/website/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/users/ryancanty/desktop/portfolio2/website/css/portfolio.css"> <link rel="stylesheet" type="text/css" href="/users/ryancanty/desktop/portfolio2/website/css/portfolioflex.css"> </head> <body> <header>     <ul class="main-nav">         <li>about</li>         <li>portfolio</li>         <li>skills</li>         <li>contact</li>     </ul> </header>   <div class="intro">     <h2 class="hello">hello, name is</h2>     <h1 class="name">ryan canty</h1>     <h2 class="role">ui designer - ux designer - front end web developer</h2>     <h2 class="location">- boston, ma -</h2> </div>  <div class="about">     <h1 class="sec-title">about</h1>     <p>i recent graduate of fordham university gabelli school of business earned master's degree in information systems, while playing division men's basketball. interests lie within web design , development, , have gained valuable experience in area during time @ fordham while working on own start-up ventures.</p>     <img class="down-arrow" src="/users/ryancanty/desktop/portfolio2/website/png/arrow_real.png"> </div>  <div class="portfolio">     <h1 class="sec-title">portfolio</h1>      <div class="portfolio-object1">     <div class="try">     </div>     </div>      <div class="portfolio-object1"> <img class="refix" src='/users/ryancanty/desktop/portfolio/website/png/portfolio_background.png'>     </div>      <div class="portfolio-object2"> <img class='img' src='/users/ryancanty/desktop/portfolio/website/png/music_player.png'>     </div>      <div class="portfolio-object2"> <img class='img' src='/users/ryancanty/desktop/portfolio/website/png/fmp.png'> <div class="try"> </div>     </div>        </div>  <div class="skills">     <h1 class="sec-title">skills</h1>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/wordpress.png">         <h1 class="skill-name">ui design</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/ux_design.png">         <h1 class="skill-name">ux design</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/sketch.png">         <h1 class="skill-name">sketch</h1>     </div>        <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/photoshop.png">         <h1 class="skill-name">photoshop</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/invision.png">         <h1 class="skill-name">invision</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/sql.png">         <h1 class="skill-name">sql</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/html.png">         <h1 class="skill-name">html 5</h1>     </div>      <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/css.png">         <h1 class="skill-name">css 3</h1>     </div>       <div class="skills-sec">         <img class="skills-img" src="/users/ryancanty/desktop/portfolio2/website/png/javascript.png">         <h1 class="skill-name ad">javascript</h1>     </div>  </div>   <div class="contact">     <h1 id="contact" class="sec-title">contact</h1>         <p class="contact-text"><a class="email-link" href="mailto:rcanty42@gmail.com">send email</a>, or copy address <br/> input below.</p>         <h1 class="email-address">rcanty42@gmail.com</h1>     </div>    <footer> <ul class="main-nav">     <li>about</li>     <li>portfolio</li>     <li>skills</li>     <li>contact</li> </ul> </footer>    </body> </html> 


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -