i'm having issues repsonsive design on website i'm working on. when visit site on phone width smaller divs texts , such goes outside of phone width. hard explain, if have you'll see i'm talking about.
here's link if want see how looks on mobile phone. http://royalq.site88.net/
if find other errors or problems in code, feel free point out. in advance :)
html, body { margin: 0; padding: 0; } @font-face { font-family: 'drugsregular'; src: url('font1/drugs-webfont.eot'); src: url('font1/drugs-webfont.eot?#iefix') format('embedded-opentype'), url('font1/drugs-webfont.woff2') format('woff2'), url('font1/drugs-webfont.woff') format('woff'), url('font1/drugs-webfont.ttf') format('truetype'), url('font1/drugs-webfont.svg#drugsregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'coneria_script_demoregular'; src: url('font2/demo_coneriascript-webfont.eot'); src: url('font2/demo_coneriascript-webfont.eot?#iefix') format('embedded-opentype'), url('font2/demo_coneriascript-webfont.woff2') format('woff2'), url('font2/demo_coneriascript-webfont.woff') format('woff'), url('font2/demo_coneriascript-webfont.ttf') format('truetype'), url('font2/demo_coneriascript-webfont.svg#coneria_script_demoregular') format('svg'); font-weight: normal; font-style: normal; } { text-decoration: none; color: white; } p { font-family: 'drugsregular'; font-size: 16px; text-align: justify; color: #e6e6e6; } h1 { font-family: 'coneria_script_demoregular'; font-size: 26px; text-align: center; color: white; } h2 { font-family: 'drugsregular'; font-size: 16px; color: white; padding-top: 0px; padding-left: 15px; height: 32px; } h3 { font-family: 'coneria_script_demoregular'; font-size: 20px; text-align: center; } h4 { font-family: 'coneria_script_demoregular'; font-size: 18px; text-align: center; color: black; } .header { background-color: white; width: 100%; height: 60px; -webkit-box-shadow: 0px 2px 5px 0px #292929; -moz-box-shadow: 0px 2px 5px 0px #292929; box-shadow: 0px 2px 5px 0px #292929; position: fixed; } .menu { padding-right: 30px; height: 60px; float:right; font-family: 'coneria_script_demoregular'; font-size: 20px; text-align: center; } .menu ul { display: none; position: absolute; } .menu li { margin:0 auto; display: inline-block; width: 100px; } .menu li:hover > ul { margin:0 auto; right: 10px; display: block; font-family: 'drugsregular'; font-size: 14px; } .menu { background-color: #363636; padding-top: 12px; text-decoration:none; height: 48px; width: 120px; display: block; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out; } .menu a:hover { background-color: #ff6edb; } .logo { float:left; padding-left: 20px; padding-top: 10px; } .container1 { width: 100%; padding-top: 60px; height: 400px; } .bkimage1 { background-image: url(images/personalroyalq.jpg); background-repeat: no-repeat; background-size: cover; height: 745px; } .title { width: 665px; padding-top: 170px; margin: 0 auto; } .lasmer { background-color: #363636; height: 35px; width: 90px; margin: 0 auto; -webkit-box-shadow: 0px 1px 1px 0px #1f1f1f; -moz-box-shadow: 0px 1px 1px 0px #1f1f1f; box-shadow: 0px 1px 1px 0px #1f1f1f; transition: .20s ease-in-out; -moz-transition: .20s ease-in-out; -webkit-transition: .20s ease-in-out; } .lasmer:hover { background-color: #ec4e8c; } .lasmertext { font-family: 'drugsregular'; padding-left: 15px; padding-top: 5px; } .content { display: flex; margin: 0 auto; width: 1024px; } .firsti { margin: 0 auto; padding-right: 10px; padding-top: 25px; } .firstp { padding-top: 10px; width: 500px; height: 370px; margin: 0 auto; } .firstp p { font-family: 'drugsregular'; font-size: 16px; color: black; text-align: justify; } .container2 { height: 1000px; } .bkimage2 { height: 1000px; background-image: url(images/bkimage2.jpg); background-repeat: no-repeat; background-size: cover; } .content2title { margin:0 auto; padding-top: 90px; } .content2 { margin:0 auto; padding-top: 30px; height: 700px; width: 1024px; display: flex; } .c2leftimage { margin: 0 auto; width: 453px; } .c2rightimage { margin: 0 auto; width: 453px; height: 453px; } .footerbk { width: 100%; height: 350px; background-color: #070707; } .footer { margin:0 auto; width: 1024px; height: 350px; } .firstfooter { margin: 0 auto; display: flex; } .firstfooter p { } .firstfirstfooter { padding: 15px 0px 0px 30px; } .secondsecondfooter { padding: 15px 0px 0px 30px; } .thirdthirdfooter { padding: 15px 0px 0px 30px; } .fourthfourthfooter { padding: 15px 0px 0px 30px; } .secondfooter { display: flex; } .secondfooter a{ color: #ff6edb; font-family: 'drugsregular'; font-size: 24px; opacity: 1; transition: opacity .20s ease-in-out; -moz-transition: opacity .20s ease-in-out; -webkit-transition: opacity .20s ease-in-out; } .secondfooter a:hover { opacity: 0.5; } .firstfirstfooter { padding: 10px 0px 0px 0px; } .secondsecondfooter { padding: 10px 0px 0px 30px; } .thirdthirdfooter { padding: 10px 0px 0px 30px; } .fourthfourthfooter { padding: 10px 0px 0px 30px; } .thirdfooter { display: flex; } .firstfirstfirstfooter { padding: 75px 0px 0px 30px; } .fourthfooter { display: flex; } .firstfirstfirstfirstfooter { padding: 0px 0px 0px 0px; } .secondsecondsecondsecondfooter { padding: 0px 0px 0px 30px; } .thirdthirdthirdthirdfooter { padding: 0px 0px 0px 30px; } .fourthfourthfourthfourthfooter { padding: 0px 0px 0px 30px; } @media screen , (max-width: 800px) { .header { position: relative; } .container1 { padding-top: 0px; } .bkimage1 { } .title { width: 440px; } .content { display: inline; } .firsti { width: 440px; } .firstp { height: 400px; width: 440px; } .container2 { height: 1400px; } .bkimage2 { height: 1400px; } .content2title { padding-top: 30px; } .content2 { display: inline; } .footerbk { height: 650px; } .footer { width: 440px; } .firstfooter { width: 250px; } .firstfirstfooter { padding: 10px 0px 0px 0px; } .secondfooter { padding-left: 30px; } .fourthfooter { display: inline; } .firstfirstfirstfirstfooter { padding: 0px 0px 0px 30px; } .secondsecondsecondsecondfooter { padding: 5px 0px 0px 30px; } .thirdthirdthirdthirdfooter { padding: 10px 0px 0px 30px; } .fourthfourthfourthfourthfooter { padding: 5px 0px 0px 30px; } }<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/style.css" rel="stylesheet"> <link rel="shortcut icon" href="favicon.ico"> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <title>royal q uf</title> </head> <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getelementsbytagname(s)[0]; if (d.getelementbyid(id)) return; js = d.createelement(s); js.id = id; js.src = "//connect.facebook.net/sv_se/sdk.js#xfbml=1&version=v2.5"; fjs.parentnode.insertbefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="header"> <div class="logo"> <a href="index.html"><img src="images/royalqlogo.png"></a> </div> <div class="menu"> <nav> <li><a href="#">meny</a> <ul> <a href="http://www.yourvismawebsite.com/royal-q-uf/natbutik">nät</br>butik</a> <a href="kontakt.html">kontakt</a> </ul> </li> </nav> </div> </div> <div class="container1"> <div class="bkimage1"> <div class="title"> <h1> royal q </h1> <p> royal q lovar dig en parfym som du aldrig kommer glömma. med unika aromer av italiensk ursprung ger dig den en sensuell doft som är oemotståndlig... </p> </div> <a href="#content"> <div class="lasmer"> <div class="lasmertext">läs mer</div> </div> </a> </div> <div class="content"> <a name="content"></a> <div class="firsti"> <img src="css/images/bild1.jpg" width="440px" height="330px"> </div> <div class="firstp"> <p> hej! royal q lovar dig en parfym som du aldrig kommer glömma. med unika aromer av italiensk ursprung så ger dig den en sensuell doft som är oemotståndlig. med detta tillkommer även en snyggt designad flaska som är ensam sitt slag med en högklassig förpackning. </p> <p> utöver vår parfym bär vi även botemedlet mot vintern. på royal q erbjuder vi exotiska badbomber med olika lukter, färger och former. dessa badbomber kommer ge dig en stund för ro och avkoppling som får dig att glömma vintertiden med ett dopp. </p> <p> vår produktion är etablerad alingsås och vi säljer produkterna genom återförsäljning, direktförsäljning och försäljning via internet. vår ide är att erbjuda produkter som är unika och håller en hög klass men till ett rimligt pris. </p> </div> </div> <div class="container2"> <div class="bkimage2"> <div class="content2title"> <h1>följ oss på våra sociala medier!</h1> </div> <div class="content2"> <div class="c2leftimage"> <a href="https://www.instagram.com/royalq_uf/"><img src="css/images/instagram1.png"></a> <script src="http://snapwidget.com/js/snapwidget.js"></script> <iframe src="http://snapwidget.com/in/?u=cm95ywxxx3vmfglufdewmhwzfdn8fg5vfdv8zmfkzu91dhxvbln0yxj0fhllc3x5zxm=&ve=230116" title="instagram widget" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%;"></iframe> </div> <div class="c2rightimage"> <a href="https://www.facebook.com/royal-q-uf-770187479756914/?fref=ts"><img src="css/images/facebook1.png"></a> <div class="fb-page" data-href="https://www.facebook.com/royal-q-uf-770187479756914" data-tabs="timeline" data-width="453" data-height="453" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div> </div> </div> </div> </div> <div class="footerbk"> <div class="footer"> <div class="firstfooter"> <div class="firstfirstfooter"> <p>copyright © 2015-2016 royal q uf. alla rättigheter reserverade.</p> </div> </div> <div class="secondfooter"> <div class="firstfirstfooter"> <a href="https://www.instagram.com/royalq_uf/">instagram</a> </div> <div class="secondsecondfooter"> <a href="https://www.facebook.com/royal-q-uf-770187479756914/?fref=ts">facebook</a> </div> </div> <div class="thirdfooter"> <div class="firstfirstfirstfooter"> <h1>vÅra sponsorer</h1> </div> </div> <div class="fourthfooter"> <div class="firstfirstfirstfirstfooter"> <img src="css/images/kicks.png" height="65" width="174"> </div> <div class="secondsecondsecondsecondfooter"> <img src="css/images/ica_maxi.png" height="57" width="138"> </div> <div class="thirdthirdthirdthirdfooter"> <img src="css/images/skor.png" height="69" width="300"> </div></br> <div class="fourthfourthfourthfourthfooter"> <img src="css/images/sparbanken.png" height="70" width="230"> </div> </div> </div> </div> </div> </body> </html>
fixed widths problem(of images or texts) - try have in percent, not fixed(in pixels)...at least device widths smaller 500px or so.
Comments
Post a Comment