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
Post a Comment